フォーム内で日付をカレンダーから選択できるようになる「jQuery UI Datepicker」ですが、表示されるカレンダーは祝日に対応していません。
日曜日と祝日の色を変えたいという要望があり、カレンダーに日本の祝日を反映させて対応したので、備忘録として残しておきたいと思います。
jQuery UI Datepickerのカレンダーに祝日を反映させる方法
祝日の情報は、Holidays JP APIを使って取得します。Holidays JP APIは祝日のデータを返してくれるAPIで、祝日のデータはGoogleカレンダーの情報から自動で生成されます。
Holidays JP APIで取得した祝日の情報をjQuery UI Datepickerのカレンダーに反映させます。
具体的には、以下のようにスクリプトを記述します。
※jQuery UI Datepickerの導入手順については、こちらの記事をご参照ください。
<script>
$.get('https://holidays-jp.github.io/api/v1/date.json', function(holidaysData) {
$('#datepicker').datepicker({
showOn: 'both',
buttonImageOnly: true,
beforeShowDay: function(date) { //祝日対応
if (date.getDay() == 0) {
return [true, 'is-sunday', null];
} else if (date.getDay() == 6) {
return [true, 'is-saturday', null];
}
var holidays = Object.keys(holidaysData);
for (var i = 0; i < holidays.length; i++) {
var holiday = new Date(Date.parse(holidays[i]));
if (holiday.getYear() == date.getYear() &&
holiday.getMonth() == date.getMonth() &&
holiday.getDate() == date.getDate()) {
return [true, 'is-holiday', null];
}
}
return [true, 'is-weekday', null];
}
});
});
<script>jQuery UI DatepickerのbeforeShowDayを使って、カレンダーを表示する時に平日・土曜日・日曜日・祝日のそれぞれにクラスを追加しています。
- 平日：.is-weekday
- 土曜日：.is-saturday
- 日曜日：.is-sunday
- 祝日：.is-holiday
例えば、日曜日・祝日の背景色は淡いピンク、土曜日の背景色は淡い青色にしたい場合は、以下のようにスタイルを追加してあげればOKです。
.is-sunday,
.is-holiday {
background: #fff0f5;
}
.is-saturday {
background: #f0f8ff;
}あとがき
jQuery UI Datepickerでは、元々土曜日と日曜日には.ui-datepicker-week-endというクラスが追加されています。ですが、土曜日と日曜日の色を分けたいこともあると思います。:nth-of-typeを使って、無理やりスタイルを変えることはできますが、それぞれにクラスが付いていた方がわかりやすいですね。
jQuery UI Datepickerのカレンダーに祝日を反映させたい時は、ぜひ参考にしていただければ幸いです。