Menu
Is it possible to disable all weekends for HTML 5 input type date?
<input id="date1" size="60" type="date" format="MM/DD/YYYY" placeholder="MM/DD/YYYY" />
404
How do I turn off past dates? the previous dates we need to set the minDate property of the date picker. if we set minDate:0 then it will disable all the previous dates. and we set input attribute min:current_date then it will disable all the previous dates.
If the value of the max attribute isn't a possible date string in the format yyyy-mm-dd , then the element has no maximum date value. If both the max and min attributes are set, this value must be a date string later than or equal to the one in the min attribute.
There is no possible way to do this with pure HTML5. and; var today = new Date(). toISOString().
< p >To disable the date field, double click the "Disable" button.
Just check the day. If it's a weekend you can reset the value and tell the user to pick something else.
const picker = document.getElementById('date1');
picker.addEventListener('input', function(e){
var day = new Date(this.value).getUTCDay();
if([6,0].includes(day)){
e.preventDefault();
this.value = '';
alert('Weekends not allowed');
}
});<input id="date1" size="60" type="date" format="MM/DD/YYYY" placeholder="MM/DD/YYYY" />Just for HTML 5 input type date this isn't possible.
You can use flatpickr as an alternative: ( https://chmln.github.io/flatpickr/examples/#disabling-specific-dates )
It looks better and also can do what you are asking for!
In the documentation is mentioned a property named disable that you can use to remove weekends.
{
"disable": [
function(date) {
return (date.getDay() === 0 || date.getDay() === 6);
}
],
"locale": {
"firstDayOfWeek": 1 // start week on Monday
}
}
Full working example:
$("#date1").flatpickr({
enableTime: true,
dateFormat: "m-d-Y",
"disable": [
function(date) {
return (date.getDay() === 0 || date.getDay() === 6); // disable weekends
}
],
"locale": {
"firstDayOfWeek": 1 // set start day of week to Monday
}
});<html>
<head>
<title>Using Flatpickr</title>
<!-- Flatpicker Styles -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.2.3/flatpickr.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.2.3/themes/dark.css">
</head>
<body>
<input id="date1" placeholder="MM/DD/YYYY" data-input />
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Flatpickr -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.2.3/flatpickr.js"></script>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With