How to prevent selecting weekends, holidays, or specific dates in <input type="date">
The convenient <input type="date"> for entering dates in a form.
It's convenient because it can be implemented instantly, but you cannot make specific dates unselectable.
For example, you cannot lighten the color of Saturdays and Sundays like this.
When doing something like this, it's usually best to use jQuery UI's "Datepicker", but
for those who absolutely want to do it with <input type="date">, we'll introduce an alternative.
By the way, the method using jQuery UI's Datepicker is introduced here.
(However, even with Datepicker, you can still input dates you don't want to be selectable, so a solution like this article's is necessary.)
Conclusion
In conclusion, since it's not possible to prevent selection,
I believe the only way is to display an alert the moment a date is selected.
Please try selecting a weekend or holiday.
Now, let's introduce the sample code.
Table of Contents
- Sample to prevent selecting weekends
- Sample to prevent selecting weekends and holidays
- Sample to prevent selecting past dates, weekends, and holidays
- Sample to prevent selecting specific dates
- Sample to prevent selecting weekends, holidays, and specific dates
- Attributes usable with <input type="date">
Sample to prevent selecting weekends
Sample (Please try selecting a weekend.)
<input id="date" type="date">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function(){
// When inputting
$("#date").on("change", function(){
// Get content
let val = $(this).val();
// Format
let date = new Date(val);
// Get day of the week 0=Sun 6=Sat
let week = date.getDay();
// When it's a weekend or holiday
if(week == 0 || week == 6){
// Alert
alert("That day cannot be selected.");
// Clear input
$(this).val("");
}
});
});
</script>Vanilla JavaScript here. (Open)
<input id="date" type="date">
<script>
// When inputting
document.getElementById("date").addEventListener("change", function(){
// Get content
let val = this.value;
// Format
let date = new Date(val);
// Get day of the week 0=Sun 6=Sat
let week = date.getDay();
// When it's a weekend or holiday
if(week == 0 || week == 6){
// Alert
alert("That day cannot be selected.");
// Clear input
this.value = "";
}
});
</script>It gets the day of the week for the entered date and displays an alert if it's a Sunday or Saturday.
When you get the day of the week with .getDay(), the following numbers are returned:
[0:Sun, 1:Mon, 2:Tue, 3:Wed, 4:Thu, 5:Fri, 6:Sat]
If you want to exclude weekends, use if(week == 0 || week == 6).
For example, if you want the alert to be on Tuesday, modify the if statement as follows:
if(week == 2)
Sample to prevent selecting weekends and holidays
Please try selecting a weekend or holiday.
To determine holidays, we'll borrow this library:
With this, if it's a holiday, the variable "holiday" will contain the holiday's name.
If it's not a holiday, it will contain undefined.
<script src="https://cdn.rawgit.com/osamutake/japanese-holidays-js/v1.0.10/lib/japanese-holidays.min.js"></script>
<script>
let date = new Date();
let holiday = JapaneseHolidays.isHoliday(date);
</script>Let's use this to create a sample that prevents selecting weekends and holidays.
Sample code
<input id="date" type="date">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.rawgit.com/osamutake/japanese-holidays-js/v1.0.10/lib/japanese-holidays.min.js"></script>
<script>
$(function(){
// When inputting
$("#date").on("change", function(){
// Get content
let val = $(this).val();
// Format
let date = new Date(val);
// Get day of the week 0=Sun 6=Sat
let week = date.getDay();
// Is it a holiday? (Holiday name or undefined)
let holiday = JapaneseHolidays.isHoliday(date);
// When it's a weekend or holiday
if(week == 0 || week == 6 || holiday){
// Alert
alert("That day cannot be selected.");
// Clear input
$(this).val("");
}
});
});
</script>Vanilla JavaScript here. (Open)
<input id="date" type="date">
<script src="https://cdn.rawgit.com/osamutake/japanese-holidays-js/v1.0.10/lib/japanese-holidays.min.js"></script>
<script>
// When inputting
document.getElementById("date").addEventListener("change", function(){
// Get content
let val = this.value;
// Format
let date = new Date(val);
// Get day of the week 0=Sun 6=Sat
let week = date.getDay();
// Is it a holiday? (Holiday name or undefined)
let holiday = JapaneseHolidays.isHoliday(date);
// When it's a weekend or holiday
if(week == 0 || week == 6 || holiday){
// Alert
alert("That day cannot be selected.");
// Clear input
this.value = "";
}
});
</script>When a date is entered, its content is retrieved.
It prepares the day of the week and the result of isHoliday, and displays an alert if it's a Sunday, Saturday, or a holiday.
For example, if you want the alert to be on Tuesday and holidays, modify the if statement as follows:
if(week == 2 || holiday)
Sample to prevent selecting past dates, weekends, and holidays
Sample
<input id="date" type="date">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.rawgit.com/osamutake/japanese-holidays-js/v1.0.10/lib/japanese-holidays.min.js"></script>
<script>
$(function(){
// Function to return today's date in YYYY-MM-DD format
function formatDate() {
let dt = new Date();
var y = dt.getFullYear();
var m = ('00' + (dt.getMonth()+1)).slice(-2);
var d = ('00' + dt.getDate()).slice(-2);
return (y + '-' + m + '-' + d);
}
// Set today's date to the min attribute
$("#date").attr("min", formatDate());
// When inputting
$("#date").on("change", function(){
// Get content
let val = $(this).val();
// Format
let date = new Date(val);
// Get day of the week 0=Sun 6=Sat
let week = date.getDay();
// Is it a holiday? (Holiday name or undefined)
let holiday = JapaneseHolidays.isHoliday(date);
// When it's a weekend or holiday
if(week == 0 || week == 6 || holiday){
// Alert
alert("That day cannot be selected.");
// Clear input
$(this).val("");
}
});
});
</script>Vanilla JavaScript here. (Open)
<input id="date" type="date">
<script src="https://cdn.rawgit.com/osamutake/japanese-holidays-js/v1.0.10/lib/japanese-holidays.min.js"></script>
<script>
// Function to return today's date in YYYY-MM-DD format
function formatDate() {
let dt = new Date();
var y = dt.getFullYear();
var m = ('00' + (dt.getMonth()+1)).slice(-2);
var d = ('00' + dt.getDate()).slice(-2);
return (y + '-' + m + '-' + d);
}
// Set today's date to the min attribute
document.getElementById("date").setAttribute("min", formatDate());
// When inputting
document.getElementById("date").addEventListener("change", function(){
// Get content
let val = this.value;
// Format
let date = new Date(val);
// Get day of the week 0=Sun 6=Sat
let week = date.getDay();
// Is it a holiday? (Holiday name or undefined)
let holiday = JapaneseHolidays.isHoliday(date);
// When it's a weekend or holiday
if(week == 0 || week == 6 || holiday){
// Alert
alert("That day cannot be selected.");
// Clear input
this.value = "";
}
});
</script>It gets today's date in YYYY-MM-DD format and sets the min attribute.
This will result in something like <input id="date" type="date" min="2022-02-17">, making past dates unselectable.
Sample to prevent selecting specific dates
Sample (This is an example where the 20th is a regular closing day. Please try selecting the 20th.)
<input id="date" type="date">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function(){
// Set specific dates
const off = ["0120", "0220", "0320", "0420", "0520", "0620", "0720", "0820", "0920", "1020", "1120", "1220"];
// When inputting
$("#date").on("change", function(){
// Get content
let val = $(this).val();
// Format
let date = new Date(val);
// Get selected month
let month = date.getMonth() + 1;
// Get selected day
let day = date.getDate();
// Pad with zeros, e.g., "1" becomes "01"
month = ("0" + month).slice(-2);
day = ("0" + day).slice(-2);
// When the selected date is included in the regular closing days
if(off.indexOf(month + day) !== -1){
// Alert
alert("That day cannot be selected.");
// Clear input
$(this).val("").blur();
}
});
});
</script>Vanilla JavaScript here. (Open)
<input id="date" type="date">
<script>
// Set specific dates
const off = ["0120", "0220", "0320", "0420", "0520", "0620", "0720", "0820", "0920", "1020", "1120", "1220"];
// When inputting
document.getElementById("date").addEventListener("change", function(){
// Get content
let val = this.value;
// Format
let date = new Date(val);
// Get selected month
let month = date.getMonth() + 1;
// Get selected day
let day = date.getDate();
// Pad with zeros, e.g., "1" becomes "01"
month = ("0" + month).slice(-2);
day = ("0" + day).slice(-2);
// When the selected date is included in the regular closing days
if(off.indexOf(month + day) !== -1){
// Alert
alert("That day cannot be selected.");
// Clear input
this.value = "";
}
});
</script>On line 7, we create an array of regular closing days.
For example, "0220" for Feb 20th, "0305" for Mar 5th, filled with leading zeros.
If the selected date is in that array, an alert is displayed.
Sample to prevent selecting weekends, holidays, and specific dates
This is a combination of the previous examples.
Please try selecting a weekend, holiday, or the 20th.
<input id="date" type="date">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.rawgit.com/osamutake/japanese-holidays-js/v1.0.10/lib/japanese-holidays.min.js"></script>
<script>
$(function(){
// Set specific dates
const off = ["0120", "0220", "0320", "0420", "0520", "0620", "0720", "0820", "0920", "1020", "1120", "1220"];
$("#date").on("change", function(){
// Get content
let val = $(this).val();
// Format
let date = new Date(val);
// Get day of the week 0=Sun 6=Sat
let week = date.getDay();
// Is it a holiday? (Holiday name or undefined)
let holiday = JapaneseHolidays.isHoliday(date);
// Get selected month
let month = date.getMonth() + 1;
// Get selected day
let day = date.getDate();
// Pad month and day with zeros, e.g., "1" becomes "01"
month = ("0" + month).slice(-2);
day = ("0" + day).slice(-2);
// If the selected date is included in weekends, holidays, or regular closing days, an error occurs
if(week == 0 || week == 6 || holiday || off.indexOf(month + day) !== -1){
// Alert
alert("That day cannot be selected.");
// Clear input
$(this).val("").blur();
}
});
});
</script>Vanilla JavaScript here. (Open)
<input id="date" type="date">
<script src="https://cdn.rawgit.com/osamutake/japanese-holidays-js/v1.0.10/lib/japanese-holidays.min.js"></script>
<script>
// Set specific dates
const off = ["0120", "0220", "0320", "0420", "0520", "0620", "0720", "0820", "0920", "1020", "1120", "1220"];
document.getElementById("date").addEventListener("change", function(){
// Get content
let val = this.value;
// Format
let date = new Date(val);
// Get day of the week 0=Sun 6=Sat
let week = date.getDay();
// Is it a holiday? (Holiday name or undefined)
let holiday = JapaneseHolidays.isHoliday(date);
// Get selected month
let month = date.getMonth() + 1;
// Get selected day
let day = date.getDate();
// Pad month and day with zeros, e.g., "1" becomes "01"
month = ("0" + month).slice(-2);
day = ("0" + day).slice(-2);
// If the selected date is included in weekends, holidays, or regular closing days, an error occurs
if(week == 0 || week == 6 || holiday || off.indexOf(month + day) !== -1){
// Alert
alert("That day cannot be selected.");
// Clear input
this.value = "";
}
});
</script>
Attributes of <input type="date">
I'll include this just in case, but you don't have to read it.
The following three attributes can be used with <input type="date">.
| max |
Specifies the latest (future) date to accept in yyyy-mm-dd format. |
|---|---|
| min |
Specifies the earliest (past) date to accept in yyyy-mm-dd format. |
| step |
Allows specifying dates at specified day intervals. |
<input type="date"> - HTML: HyperText Markup Language | MDN
Examples
Example : <input type="date" max="2026-04-18">
You can select dates up to today.
→Convenient
Example : <input type="date" min="2026-04-18">
You can select dates from today onwards.
→Convenient
Example : <input type="date" step="7">
You can select dates at 1-week intervals.
→It's almost there, but when would you use it?
Comments
We also welcome reports such as "It worked!".
-
#001
Anonymous
I have read your article.
The weekend alert display worked.
Thank you very much.
Is it possible to specify multiple dates, such as February 20th and March 5th, as days off?
-
#002
Owner
Thank you for the report!
(I'm a little touched by this comment, exactly one year after the publication date lol)
Indeed, you'd want a pattern to prevent selecting specific dates too.
I've added it, so please feel free to use it 👍
-
#003
Anonymous
So there are gods after all...
I can't help but think that.
>> A little touched by the comment one year later
I am extraordinarily moved.
And it worked.
Thank you very much.
I pray that the greatest happiness of this century reaches Kanai-sama.
Thank you so much.
-
#004
Owner
Glad it worked out!
-
#005
Anonymous
Is it possible to display Tuesdays and Thursdays every week, and make other days lighter in color and unselectable?
I'm struggling with that right now.
-
#006
Owner
You want to lighten specific days on the calendar, right?
<input type="date"> cannot do that, so the only option is to display an alert, as stated in this article.
As mentioned at the beginning of this article, you can achieve that using jQuery UI's Datepicker, so please refer to this article.
If this was helpful, we appreciate your support!
Your support will be used for childcare.
Or support us by buying something from the buttons below
(You don't have to buy the linked product.)
Amazon
Rakuten Ichiba
Yahoo! Shopping
PR