診療予約フォームの日付選択で、休診日を選択できないようにする方法 ※jQuery UI Datepicker(カレンダー)指定日の選択を無効

NO IMAGE

お客様から要望があり、はじめて対応したので履歴を残しておきます。

サンプル(つきじこころのクリニック)
http://hero116011.xsrv.jp/tsukiji-kokoro.com/contact/index_test.html

contact/index.html にある、カレンダーの記述の上に<①追記する記述>を入れてください。

該当ファイル

<該当箇所>

<script>
$(function() {
$(“#datepicker”).datepicker();
$(“#datepicker”).datepicker(“option”, “showOn”, ‘both’);
$(“#datepicker”).datepicker(“option”, “buttonImageOnly”, true);
$(“#datepicker”).datepicker(“option”, “buttonImage”, ‘../images/calendar_img.png’);
});
</script>

<①追記する記述>

 

<script>
$(function() {
// 祝日を配列で確保
var holidays = [ ‘2019-7-15’, ‘2019-8-11’, ‘2019-8-12’, ‘2019-9-16’, ‘2019-9-23’, ‘2019-10-14’, ‘2019-10-22’, ‘2019-11-3’, ‘2019-11-4’, ‘2019-11-23’, ‘2020-1-1’, ‘2020-1-13’, ‘2020-2-11’, ‘2020-2-23’, ‘2020-2-24’, ‘2020-3-20’, ‘2020-4-29’, ‘2020-5-3’, ‘2020-5-4’, ‘2020-5-5’, ‘2020-5-6’, ‘2020-7-23’, ‘2020-7-24’, ‘2020-8-10’, ‘2020-9-21’, ‘2020-9-22’, ‘2020-11-3’, ‘2020-11-23’, ‘2021-1-1’, ‘2021-1-11’, ‘2021-2-11’, ‘2021-2-23’, ‘2021-3-20’, ‘2021-4-29’, ‘2021-5-3’, ‘2021-5-4’, ‘2021-5-5’, ‘2021-7-19’, ‘2021-8-11’, ‘2021-9-20’, ‘2021-9-23’, ‘2021-10-11’, ‘2021-11-3’, ‘2021-11-23’, ‘2022-1-1’, ‘2022-1-10’, ‘2022-2-11’, ‘2022-2-23’, ‘2022-3-21’, ‘2022-4-29’, ‘2022-5-3’, ‘2022-5-4’, ‘2022-5-5’, ‘2022-7-18’, ‘2022-8-11’, ‘2022-9-19’, ‘2022-9-23’, ‘2022-10-10’, ‘2022-11-3’, ‘2022-11-23’ ];

$(“#datepicker”).datepicker({
numberOfMonths: 1,
beforeShowDay: function(date) {
// 祝日の判定
for (var i = 0; i < holidays.length; i++) {
var htime = Date.parse(holidays[i]); // 祝日を ‘YYYY-MM-DD’ から time へ変換
var holiday = new Date();
holiday.setTime(htime); // 上記 time を Date へ設定

// 祝日
if (holiday.getYear() == date.getYear() &&
holiday.getMonth() == date.getMonth() &&
holiday.getDate() == date.getDate()) {
return [false, ‘holiday’];
}
}
// 日曜日
if (date.getDay() == 0) {
return [false, ‘sunday’];
}
// 土曜日
if (date.getDay() == 6) {
return [true, ‘saturday’];
}
// 月曜日
if (date.getDay() == 1) {
return [false, ”];
}
// 平日
return [true, ”];
},
onSelect: function(dateText, inst) {
$(“#date_val”).val(dateText);
}
});
// サンプル用のデフォルト日付
//$(“#datepicker”).datepicker(“setDate”, new Date(2012, 10 – 1, 30)); // -1 for 0 based month.
});
</script>

補足

祝日を配列で確保 臨時休診と祝日を入れるとクリックできなくなる。
祝日 return [false, ”]; だとクリックできない。return [true, ”];だとクリックできる。
サンプル用のデフォルト日付 コメントアウトを解除すればデフォルトの日付を指定できる。

参考サイト
https://www.northwind.mydns.jp/samples/datepicker_sample7.php