Disable Weekends on HTML 5 input type date
Question
是否可以禁用 HTML 5 输入类型日期的所有周末？
<input id="date1" size="60" type="date" format="MM/DD/YYYY" placeholder="MM/DD/YYYY" />
3 answers
solution1
2 2019-06-24 13:52:47
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: "mdY", "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>
solution2
2 2019-06-24 14:08:58
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" />
solution3
0 2021-12-31 13:18:36
some browser like Chrome will set the date when you use the arrows or select another month
To avoid this problem, I have found that the setCustomValidity method was more useful to my use case than resetting the value of the input.
Here is an example below. On form submission, if a week-end is selected, the form won't actually submit and the error will be displayed.
const picker = document.getElementById('date1'); picker.addEventListener('change', function(e){ var day = new Date(this.value).getUTCDay(); if([6,0].includes(day)){ e.target.setCustomValidity('week-end not allowed') } else { e.target.setCustomValidity('') } });
<input id="date1" size="60" type="date" format="MM/DD/YYYY" placeholder="MM/DD/YYYY" />
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.