Disable Certain Dates from Html5 Datepicker

How do I restrict past dates in html5 input type Date

You can try this

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

$(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;

// or instead:
// var maxDate = dtToday.toISOString().substr(0, 10);

alert(maxDate);
$('#txtDate').attr('min', maxDate);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="date" id="txtDate" />

HTML5 - Datepicker disable past dates without jQuery

HTML5 supports the min and max attribute.

Play around with the example below and you'll understand how it works!

  Enter a date before 2000-12-21:  <input type="date" name="example1" max="2000-12-20"><br>
Enter a date after 2000-12-21: <input type="date" name="example2" min="2000-12-22"><br>

Restrict future dates in HTML5 date input

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

HTML5 datepicker prevent past dates

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.

function onLoad() {
var input = document.getElementById("dateField");
var today = new Date();
// Set month and day to string to add leading 0
var day = new String(today.getDate());
var mon = new String(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 = new String( yr + '-' + mon + '-' + day );

input.disabled = false;
input.setAttribute('min', date);
}

document.addEventListener('load', onLoad, false);

<body>
<input id="dateField" type="date" disabled />
</body>

Here it is in a fiddle: http://jsfiddle.net/tj9Xh/2/



Related Topics



Leave a reply



Submit