Html5 Datepicker Prevent Past Dates
I am working on a website for booking movie tickets. What should I set the min attribute to, to prevent past dates in the HTML5 datepicker? (I do not want to use PHP solution menti
Solution 1:
When the document loads have the date input disabled. Run an onload function that inserts today's date into the min field in the required format.
functiononLoad() {
var input = document.getElementById("dateField");
var today = newDate();
// Set month and day to string to add leading 0var day = newString(today.getDate());
var mon = newString(today.getMonth()+1); //January is 0!var yr = today.getFullYear();
if(day.length < 2) { day = "0" + day; }
if(mon.length < 2) { mon = "0" + mon; }
var date = newString( yr + '-' + mon + '-' + day );
input.disabled = false;
input.setAttribute('min', date);
}
document.addEventListener('load', onLoad, false);
<body><inputid="dateField"type="date"disabled /></body>Here it is in a fiddle: http://jsfiddle.net/tj9Xh/2/
Solution 2:
try this:
<input id="dateField"type="date"/>
var dt= newDate();
var yyyy = dt.getFullYear().toString();
var mm = (dt.getMonth()+1).toString(); // getMonth() is zero-basedvar dd = dt.getDate().toString();
var min = yyyy +'-'+ (mm[1]?mm:"0"+mm[0]) +'-'+ (dd[1]?dd:"0"+dd[0]); // paddingalert(min);
$('#dateField').prop('min',min);
Post a Comment for "Html5 Datepicker Prevent Past Dates"