How to prevent selecting weekends, holidays, or specific dates in jQuery UI Datepicker

2023-02-17 2024-11-19

Here's how to use jQuery UI's "Datepicker" to prevent selecting weekends, holidays, or specific dates in form date input fields.

By the way, I also introduce a method using a regular <input type="date"> without jQuery UI, so please take a look if you like.

How to prevent selecting weekends, holidays, or specific dates with <input type="date">

Implementation

First, let's implement the minimum Datepicker.

① Load the necessary files.

These are the four files: jQuery core, jQuery UI, CSS, and the Japanese localization file.

<!-- jQuery UIのCSS -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.css">
<!-- jQuery本体 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- jQuery UI本体 -->
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<!-- 日本語化ファイル -->
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script>

② Create an input tag. Set the type to "text".

<input type="text" id="datepicker">

③ Execute "datepicker()" on the created input tag.

$("#datepicker").datepicker();

Here's the completed result.

Clicking it will display the calendar.

Preliminary Knowledge

Here's a sample where weekends cannot be selected, but

If you select a weekday, you can then simply edit the text and change it to a weekend.

How to prevent selecting weekends, holidays, or specific dates in jQuery UI Datepicker

Therefore, while we will configure datepicker to prevent selecting weekends,

in conjunction with that, we must also perform value validation.

Ultimately, server-side validation will also be necessary.

I will also write that code, so keeping it in mind will make things smoother!

Sample: Preventing selection of weekends
Sample: Preventing selection of weekends and holidays
Sample: Preventing selection of past dates, weekends, and holidays
Sample: Preventing selection of specific dates
Sample: Preventing selection of weekends, holidays, and specific dates
Sample: Allowing selection only from X business days onwards, excluding weekends, holidays, and specific dates
(Bonus) Changing the display format to "YYYY年MM月DD日"

Sample: Preventing selection of weekends

Sample: Weekends should be unselectable.

Here's the source code.

//Datepicker
$("#datepicker").datepicker({
	beforeShowDay: function (date) {
		//日曜(0)または土曜(6)のとき
		if (date.getDay() == 0 || date.getDay() == 6) {
			return [false, "ui-state-disabled"];
		}else{
			return [true, ""];
		}
	}
});
//テキスト編集した際のアラート
$("#datepicker").on("change", function(){
	//内容を取得
	let val = $(this).val();
	//整形
	let date = new Date(val);
	//土日のとき
	if(date.getDay() == 0 || date.getDay() == 6){
		//アラート
		alert("その日は選択できません｡");
		//inputを空に
		$(this).val("");
	}
});

We are using the "beforeShowDay" option in Datepicker settings.

When the day of the week obtained by .getDay() is Sunday (0) or Saturday (6), it is made unselectable and the class "ui-state-disabled" is applied.

The "ui-state-disabled" class is a class provided by jQuery UI's CSS, which applies a style to make inactive buttons semi-transparent.

As mentioned earlier, since it's possible to edit the text later and change it to a weekend, we address this in the latter part of the code.

For example, if you want to prevent selecting Tuesdays, modify the two if statements as follows:

if(date.getDay() == 2)

Sample: Preventing selection of weekends and holidays

Sample

To determine holidays, we will use this library.

japanese-holidays-js

With this, if it's a holiday, the variable "holiday" will contain the name of the holiday.
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 create a sample that prevents selecting weekends and holidays using this.

Sample code

<script src="https://cdn.rawgit.com/osamutake/japanese-holidays-js/v1.0.10/lib/japanese-holidays.min.js"></script>
<script>
$(function(){
	//Datepicker
	$("#datepicker").datepicker({
		beforeShowDay: function (date) {
			//祝日かどうか
			let holiday = JapaneseHolidays.isHoliday(date);
			//日曜(0)または土曜(6)または祝日のとき
			if (date.getDay() == 0 || date.getDay() == 6 || holiday) {
				return [false, "ui-state-disabled"];
			}else{
				return [true, ""];
			}
		}
	});
	//テキスト編集した際のアラート
	$("#datepicker").on("change", function(){
		//内容を取得
		let val = $(this).val();
		//整形
		let date = new Date(val);
		//祝日かどうか
		let holiday = JapaneseHolidays.isHoliday(date);
		//土日または祝日のとき
		if(date.getDay() == 0 || date.getDay() == 6 || holiday){
			//アラート
			alert("その日は選択できません｡");
			//inputを空に
			$(this).val("");
		}
	});
});
</script>

We have added a condition to reject the date if "holiday" contains the name of a holiday.

As mentioned earlier, since it's possible to edit the text later, we address this in the latter part of the code.

For example, if you want to prevent selecting Tuesdays and holidays, modify the two if statements as follows:

if(date.getDay() == 2 || holiday)

Sample: Preventing selection of past dates, weekends, and holidays

Sample

<script src="https://cdn.rawgit.com/osamutake/japanese-holidays-js/v1.0.10/lib/japanese-holidays.min.js"></script>
<script>
$(function(){
	//Datepicker
	$("#datepicker").datepicker({
		minDate: new Date(),
		beforeShowDay: function (date) {
			let holiday = JapaneseHolidays.isHoliday(date);
			//日曜(0)または土曜(6)または祝日のとき
			if (date.getDay() == 0 || date.getDay() == 6 || holiday) {
				return [false, "ui-state-disabled"];
			}else{
				return [true, ""];
			}
		}
	});
	//テキスト編集した際のアラート
	$("#datepicker").on("change", function(){
		//内容を取得
		let val = $(this).val();
		//整形
		let date = new Date(val);
		//祝日かどうか
		let holiday = JapaneseHolidays.isHoliday(date);
		//今日
		let today = new Date();
		//今日と選択された日付を比較 (過去ならマイナス､未来ならプラスになる)
		let is_future = new Date(formatDate(date)) - new Date(formatDate(today));
		//土日または祝日または過去のとき
		if(date.getDay() == 0 || date.getDay() == 6 || holiday || is_future < 0){
			//アラート
			alert("その日は選択できません｡");
			//inputを空に
			$(this).val("");
		}
	});
	//YY-MM-DDで返す関数定義
	function formatDate(dt) {
		var y = dt.getFullYear();
		var m = ('0' + (dt.getMonth()+1)).slice(-2);
		var d = ('0' + dt.getDate()).slice(-2);
		return (y + '-' + m + '-' + d);
	}
});
</script>

It got a bit long, but this also allows for checking past dates.

In the Datepicker settings, we are using "minDate" to specify the minimum date, setting it to today.

After that, since it's still possible to edit the text, an alert is displayed if the date is earlier than today's date.

Sample: Preventing selection of specific dates

Sample (Example where the 20th is a regular closing day.)

//特定の日付をセット
const off = ["0120", "0220", "0320", "0420", "0520", "0620", "0720", "0820", "0920", "1020", "1120", "1220"];
//Datepicker
$("#datepicker").datepicker({
	beforeShowDay: function (date) {
		//定休日の中に､選ばれた日付が含まれているとき
		if (off.indexOf(formatDay(date)) !== -1) {
			return [false, "ui-state-disabled"];
		}else{
			return [true, ""];
		}
	}
});
//テキスト編集した際のアラート
$("#datepicker").on("change", function(){
	//内容を取得
	let val = $(this).val();
	//整形
	let date = new Date(val);
	//定休日の中に､選ばれた日付が含まれているとき
	if(off.indexOf(formatDay(date)) !== -1){
		//アラート
		alert("その日は選択できません｡");
		//inputを空に
		$(this).val("");
	}
});
//MMDDで返す関数定義
function formatDay(dt) {
	var m = ('0' + (dt.getMonth()+1)).slice(-2);
	var d = ('0' + dt.getDate()).slice(-2);
	return (m + d);
}

First, create an array of regular closing days.

Enter dates with leading zeros, like "0220" for Feb 20th, and "0305" for Mar 5th.

Dates found in that array will be made inactive.

Sample: Preventing selection of weekends, holidays, and specific dates

This is a combination of the previous examples.

Example where weekends, holidays, or the 20th cannot be selected.

<script src="https://cdn.rawgit.com/osamutake/japanese-holidays-js/v1.0.10/lib/japanese-holidays.min.js"></script>
<script>
$(function(){
	//特定の日付をセット
	const off = ["0120", "0220", "0320", "0420", "0520", "0620", "0720", "0820", "0920", "1020", "1120", "1220"];
	//Datepicker
	$("#datepicker").datepicker({
		beforeShowDay: function (date) {
			let holiday = JapaneseHolidays.isHoliday(date);
			//土日祝または定休日の中に､選ばれた日付が含まれているとき
			if (date.getDay() == 0 || date.getDay() == 6 || holiday || off.indexOf(formatDay(date)) !== -1) {
				return [false, "ui-state-disabled"];
			}else{
				return [true, ""];
			}
		}
	});
	//テキスト編集した際のアラート
	$("#datepicker").on("change", function(){
		//内容を取得
		let val = $(this).val();
		//整形
		let date = new Date(val);
		//祝日かどうか
		let holiday = JapaneseHolidays.isHoliday(date);
		//土日祝または定休日の中に､選ばれた日付が含まれているとき
		if(date.getDay() == 0 || date.getDay() == 6 || holiday || off.indexOf(formatDay(date)) !== -1){
			//アラート
			alert("その日は選択できません｡");
			//inputを空に
			$(this).val("");
		}
	});
	//MMDDで返す関数定義
	function formatDay(dt) {
		var m = ('0' + (dt.getMonth()+1)).slice(-2);
		var d = ('0' + dt.getDate()).slice(-2);
		return (m + d);
	}
});
</script>

Sample: Allowing selection only from X business days onwards, excluding weekends, holidays, and specific dates

Let's add the condition "X business days onwards". (Requested in comments!)

Example where only dates other than weekends, holidays, the 20th, and at least 4 business days later can be selected.

//○営業日以降の設定
const after = 4;
//特定の日付をセット
const off = ["0120", "0220", "0320", "0420", "0520", "0620", "0720", "0820", "0920", "1020", "1120", "1220"];

//今日の日付を取得
let today = new Date();

//○営業日以降になるまで数える
let i = 0;
let days = 1;
while(i < after){
	//翌日
	let next = new Date();
	next.setDate(next.getDate() + days);
	next = new Date(next);

	//祝日か判定
	let holiday = JapaneseHolidays.isHoliday(next);

	//翌日が土日でも祝日でも特定の日でもないとき
	if (next.getDay() != 0 && next.getDay() != 6 && !holiday && off.indexOf(formatDay(next)) == -1) {
		//営業日カウント
		i++;
	}
	days++;
}

//○営業日後の日付
let later = new Date();
later.setDate(later.getDate() + days);
later = new Date(later);

//Datepicker
$("#datepicker").datepicker({
	minDate: later, //○営業日後をminDateに設定
	beforeShowDay: function (date) {
		let holiday = JapaneseHolidays.isHoliday(date);
		//日曜(0)または土曜(6)または祝日または特定の日のとき
		if (date.getDay() == 0 || date.getDay() == 6 || holiday || off.indexOf(formatDay(date)) !== -1) {
			return [false, "ui-state-disabled"];
		}else{
			return [true, ""];
		}
	}
});
//テキスト編集した際のアラート
$("#datepicker").on("change", function(){
	//内容を取得
	let val = $(this).val();
	//整形
	let date = new Date(val);
	//祝日かどうか
	let holiday = JapaneseHolidays.isHoliday(date);
	//○営業日後と選択された日付を比較 (過去ならマイナス､未来ならプラスになる)
	let is_future = new Date(formatDate(date)) - new Date(formatDate(later));
	//土日または特定の日または祝日または○営業日より前のとき
	if(date.getDay() == 0 || date.getDay() == 6 || holiday || off.indexOf(formatDay(date)) !== -1 || is_future < 0){
		//アラート
		alert("その日は選択できません｡");
		//inputを空に
		$(this).val("");
	}
});

//YY-MM-DDで返す関数定義
function formatDate(dt) {
	var y = dt.getFullYear();
	var m = ('0' + (dt.getMonth()+1)).slice(-2);
	var d = ('0' + dt.getDate()).slice(-2);
	return (y + '-' + m + '-' + d);
}

//MMDDで返す関数定義
function formatDay(dt) {
	var m = ('0' + (dt.getMonth()+1)).slice(-2);
	var d = ('0' + dt.getDate()).slice(-2);
	return (m + d);
}

(Bonus) Changing the display format to "YYYY年MM月DD日"

How to change the display format to "YYYY年MM月DD日" when entering dates. (Requested in comments!)

When executing datepicker, just add the following option.

//Datepicker
$("#datepicker").datepicker({
	dateFormat: 'yy年mm月dd日'
});

For example, when combining with the sample above, Sample: Allowing selection only from X business days onwards, excluding weekends, holidays, and specific dates

Please modify the datepicker section as follows.

//Datepicker
$("#datepicker").datepicker({
	dateFormat: 'yy年mm月dd日',
	minDate: later, //○営業日後をminDateに設定
	beforeShowDay: function (date) {
		let holiday = JapaneseHolidays.isHoliday(date);
		//日曜(0)または土曜(6)または祝日または特定の日のとき
		if (date.getDay() == 0 || date.getDay() == 6 || holiday || off.indexOf(formatDay(date)) !== -1) {
			return [false, "ui-state-disabled"];
		}else{
			return [true, ""];
		}
	}
});

Comments

We look forward to reports such as "It worked!"

2024-01-31
Anonymous

How can I combine "Sample: Preventing selection of weekends, holidays, and specific dates" with "allowing selection only from 4 business days onwards"?
2024-01-31
Owner

Thank you for your request!

I've promptly created it, so please check here to see if it matches your intention!
2024-06-12
Anonymous

Thank you for publishing such an article for free.

I am truly grateful for the easy-to-understand explanations for web beginners!

I implemented the "Sample: Allowing selection only from X business days onwards, excluding weekends, holidays, and specific dates" by copy-pasting, but how can I change the display format to [YYYY年MM月DD日]?

It would be great if I could also display the day of the week, but if possible, I would appreciate it if you could advise me.
2024-06-12
Owner

Thank you for your request!

I've added it as a (Bonus). Please check here to see if it matches your intention!
2024-06-13
Anonymous

Owner, thank you very much for your prompt response.

As a beginner, I tried adding dateFormat, but it didn't work. However, I found the cause.

(It is not completely resolved yet.)

I had replaced `$("#datepicker")` in Datepicker with the actual class name I wanted to apply, and similarly replaced `$("#datepicker")` in the alert for text editing with the class name. When I selected an available date on the calendar, an alert "That day cannot be selected." appeared.

By keeping only `$("#datepicker")` in the alert for text editing as is, the selectable dates work as intended, but text editing is still possible.

This might be a case of "you're too much of a beginner, study more!", but I would be grateful if you could advise me when you truly have time.
2024-06-13
Owner

I imagine there could be two reasons.

One is the part that says:
When I selected an available date, an alert "That day cannot be selected." appeared.
This concerns me.

Perhaps the conditions within datepicker() and onChange() are different?

As in this example, the if statement if (date.getDay() == 0 || date.getDay() == 6 || holiday || off.indexOf(formatDay(date)) !== -1) appearing in both datepicker() and onChange() must be the same.

Please check if the contents of date.getDay() and formatDay(date), etc., are also the same.

The second is, since you're using a class, aren't you setting up multiple input tags?

If there are multiple inputs, it's safer to loop through them using an each statement as follows.
```
$(".datepicker").each(function(){
	//Datepicker
	$(this).datepicker({
		(略)
	});
	//テキスト編集した際のアラート
	$(this).on("change", function(){
		(略)
	});
});
```
Alternatively, if the conditions differ for multiple inputs, it might be clearer at first to separate the classes properly and use different functions.
```
//Datepicker
$(".datepicker.type01").datepicker({
	(略)
});
//テキスト編集した際のアラート
$(".datepicker.type01").on("change", function(){
	(略)
});

//Datepicker
$(".datepicker.type02").datepicker({
	(略)
});
//テキスト編集した際のアラート
$(".datepicker.type02").on("change", function(){
	(略)
});
```
Beyond this, I can't say without seeing the actual source code...
2024-08-29
Anonymous

I was looking for "preventing selection of specific dates" and this worked for me.

It was very helpful. Thank you.
2024-08-30
Owner

Thank you for the report!
2024-11-18
Anonymous

Thank you very much for making this available for free.

For example,

Is it possible to get the current time, and if it's morning, allow selecting dates from the next day, but if it's afternoon or later, allow selecting dates from the day after tomorrow?

I apologize for bothering you during your busy schedule, but I would appreciate it if you could tell me.

2024-11-19

Owner

It depends on how strictly you want to determine the time, but if judging the time when the page is opened is sufficient, you can base it on this sample and modify the definition of the "after" variable on the second line as follows!

//○営業日以降の設定
let after = 0; // Set to next business day
//現在の時間を取得
const now = new Date();
const hour24  = now.getHours();
//時間を12時間表記で取得
var hour12 = hour24 % 12;
//午後なら
if(hour12 >= 12){
	after = 1; // Set to the business day after next
}