html - Restrict future dates in HTML5 date input

Question

I want to restrict a user to only being able to add future dates in a HTML date input.

Instead of jQuery UI date picker I want to add HTML5 calender. Can anyone tell me how can I restrict the input to future dates?

Answer 1

You can use min and max attributes of HTML5 input date

HTML5 code

<input type="date" name="bday" min="2014-05-11" max="2014-05-20">

EDIT

You need to use jQuery to achieve it

jQuery code

$(function(){
    var dtToday = new Date();

    var month = dtToday.getMonth() + 1;
    var day = dtToday.getDate();
    var year = dtToday.getFullYear();

    if(month < 10)
        month = '0' + month.toString();
    if(day < 10)
        day = '0' + day.toString();

    var maxDate = year + '-' + month + '-' + day;    
    $('#txtDate').attr('max', maxDate);
});

Explanation max attribute of HTML5 input date takes month and day in double digit format.

Ex: 5 (Month) is not valid whereas 05 (Month) is valid Ex: 1 (Day) is not valid whereas 01 (Day) is valid

So I have added below code

if(month < 10)
   month = '0' + month.toString();
if(day < 10)
   day = '0' + day.toString();

Check my updated fiddle

Refer fiddle demo