Restrict future dates in HTML5 date input
To build on @Chirag Vidani's answer, the date
can be generated with fewer lines like this:
var now = new Date(),
// minimum date the user can choose, in this case now and in the future
minDate = now.toISOString().substring(0,10);
$('#my-date-input').prop('min', minDate);
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