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" />
How to disable to type in HTML input date when choosing past dates?
You can disable keyboard onkeydown event
.
$(document).ready(function() { //DISABLED PAST DATES IN APPOINTMENT DATE
var dateToday = new Date();
var month = dateToday.getMonth() + 1;
var day = dateToday.getDate();
var year = dateToday.getFullYear();
if (month < 10)
month = '0' + month.toString();
if (day < 10)
day = '0' + day.toString();
var maxDate = year + '-' + month + '-' + day;
$('#txt-appoint_date').attr('min', maxDate);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="date" id="txt-appoint_date" onkeydown="return false"/>
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 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>
Disable back date entries in input type 'date'
Change the min value of input in Javascript, like this:
document.getElementById("myDate").min = "2017-03-16";
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
Angular: Toggle Text of Button Based on Boolean Value in Model
Check If Image Exists on Server Using JavaScript
Restrict to 2 Decimal Places in Keypress of a Text Box
How to Kill a Running Process on Windows from Nodejs
How to Create Expand/Collapse Function for Each Row of Table - Angular6
The Create-React-App Imports Restriction Outside of Src Directory
How to Change Color of Ag-Grid Cells for Dynamically Changing Data
Stretch Height to Fit Content in React Native
How to Make a Bot React to Its Own Message
Check If Current Time Is Between Two Given Times in JavaScript
Using Thymeleaf Variable in Onclick Attribute
Horizontal Scrollbar on Top and Bottom of Table
It Is Possible to Call Class Function from Outside Class
Concatenate Json to a String in JavaScript
Disable Chrome Strict Mime Type Checking
Jquery: Simplest Way to Check Url for a Parameter and Pass It to Anchor Href If It Exists