【簡単】datapickerに日本の祝日を自動で登録し、選択不可にする方法【jQuery】
お問い合わせフォームにjQuery UIのライブラリdatapickerを使って日付選択を導入している。
日本の祝日を登録し、祝日を選択不可にしたい。または祝日だけ色を変えたい。
この様な悩みを解決します。
本記事ではHolidays JP APIを使ってdatapickerに祝日を登録し・選択不可もしくは色を変更する方法について解説します。
Holidays JP APIを導入
//Holidays JP API
jQuery.get('https://holidays-jp.github.io/api/v1/date.json', function (holidaysData) {
jQuery(function () {
jQuery('#datapicker').datepicker({
});
});
});
まず最初にHolidays JP APIを導入します。
Holidays JP APIは日本の祝日をJSON形式で渡すAPIです。
datapickerを起動する関数の前に、get関数で囲み送信先URLにHolidays JP APIを指定、祝日を読み込みます。
beforeShowDayオプションを使って祝日を選択不可にする
jQuery.get('https://holidays-jp.github.io/api/v1/date.json', function (holidaysData) {
jQuery(function () {
jQuery('#datapicker').datepicker({
beforeShowDay: function (date) {
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 [false, 'ui-state-disabled'];
}
}
//それ以外の日付選択できるようにする
return [true, ''];
}
});
});
});
最後にbeforeShowDayオプションを使います。
beforeShowDayオプションは特定の日付・曜日を指定し、選択・非選択を設定できます。
上記オプションの中で、for文でholidays-jpのjsonデータから祝日を取り出し、if文でdatapicker内のカレンダーデータと照合します。
上記の条件と整合したら、非選択にします。
return [false, ‘ui-state-disabled’];
非選択にするには上記コードを記述すればOKです。
祝日に色を付けたい場合はクラスを付与しCSSで色を変更
jQuery.get('https://holidays-jp.github.io/api/v1/date.json', function (holidaysData) {
jQuery(function () {
jQuery('#datapicker').datepicker({
beforeShowDay: function (date) {
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, "custom-holiday", ""];
}
}
//全日付選択できるようにする
return [true, ''];
}
});
});
});
datapickerカレンダー上、祝日を色分けしたい場合は前章でreturn [false, ‘ui-state-disabled’];と記述してあった箇所をreturn [true, “custom-holiday”, “”];に変更します。
上記コードで祝日にクラスを付けれます。
custom-holidayと書かれてる箇所がクラス名になるので任意の値に変更してください。
クラスにCSSを付与
<style>
.custom-holiday a.ui-state-default {
background-color: #00ffff;
}
</style>
最後にCSSで背景色を変えて上げればOK。
以上の流れで解決できます。
まとめ
datapickerプラグインを入れただけだと祝日は読まれません。
Holidays JP APIはgoogleカレンダーの情報をもとに祝日を取得してるAPIなのでとても優秀です。
本記事を参考に導入してみてください。
以上で解説を終わります。
