Html text box with mm/yyyy only

Question

We need to show a input box to user to enter the expiry date. The expiry date will be usually mm/yyyy. Ex, 10/2018

Is there a way to accept only MM/YYYY format values in textbox?

I have not seen any date option with input type="date".

Month should be with in valid range --- 01 to 12 only

There is no way to change the date format. See http://stackoverflow.com/questions/7372038/is-there-any-way-to-change-input-type-date-format. You need to write some JavaScript. — sebnukem, Aug 26 '15 at 15:42
Why not just use 2 select boxes? 1 dropdown to pick the month and 1 to pick the year? — Jacob Petersen, Aug 26 '15 at 15:44

Zakaria Acharki · Answer 1 · 2015-08-26T15:50:47.460

If you can use jquery, take a look at Working fiddle, using Datepicker | jQuery UI.

HTML :

<label for="startDate">Date :</label>
<input name="startDate" id="startDate" class="date-picker" />

JS :

$(function() {
    $('#startDate').datepicker({
        dateFormat: "mm/yy"
    }) 
    .datepicker('setDate', new Date())
    .datepicker("option", "changeMonth", true)
    .datepicker("option", "changeYear", true)
    .datepicker("option", "showButtonPanel", true)
    .datepicker("option", "onClose", function(e){
         var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
         var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
         $(this).datepicker("setDate",new Date(year,month,1));
    })
});

Hope this helps.

score 2 · Answer 2 · answered Aug 26 '15 at 16:16

http://eternicode.github.io/bootstrap-datepicker/?markup=input&format=&weekStart=&startDate=&endDate=&startView=0&minViewMode=0&todayBtn=false&clearBtn=false&language=en&orientation=auto&multidate=&multidateSeparator=&keyboardNavigation=on&forceParse=on#sandbox

This is THE best resource which I have found for datepicker. Solves almost EVERY need.

Use the following settings in the image below for the fields of

Format 2.Start View, 3.Min View.

Based on your requirement of having MM-YYYY field. You may need to add custom validation to make sure you are accepting the requisite format ONLY.

Steps:

Include the JS/CSS files in your project.
After selecting and testing the kind of datepicker you want. Then copy the html/js code from the bottom right and include in your application.

Hope this helps!

score 1 · Answer 3 · answered Aug 26 '15 at 15:51

1

You can use <input type="month">. The user can insert month and year. But it's not supported by IE and Firefox.

answered Aug 26 '15 at 15:51

talkahe

11
3

Html text box with mm/yyyy only

3 Answers3