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
Browsers Try to Download HTML File Instead of Opening
Html/Javascript One Click Print (No Dialogs)
How to Resize Image in Bootstrap Carousel
Navbar(Menu) Is Getting Overlapped by Body Element
How to Make Vertical Lines Between List Items Using CSS
Alternative to Iframes With Html5
What Does Enctype='Multipart/Form-Data' Mean
How to Set the Height of an Outer Div to Always Be Equal to a Particular Inner Div
Make Body Have 100% of the Browser Height
Material Design - Stepper How to Remove/Disable Steps
How to Place Div in Top Right Hand Corner of Page
Line Break in HTML Select Option
How to Change Pressed Item Background Color in Ion-List on Ionic
How to Divide Div Color With 30% Different Color and 70% Different Color in Vertical Using CSS
How to Make a Div 100% Height of the Browser Window
Flex/Grid Layouts Not Working on Button or Fieldset Elements