SOFTELメモ Developer's blog

会社概要 ブログ 調査依頼 社員募集 ...

jqueryuiのdatepickerで日曜・祝日を選択不可にする

問題

jqueryuiのdatepickerで、日曜日・祝日は選択できないようにできますか。

答え

jqueryuiのdatepicker に、beforeShowDay というオプションがある。これに関数を登録すると、登録した関数がカレンダーの各日付のセルを表示するたびに呼ばれる。戻り値に [boolean(選択可能かどうか), クラス名(指定すれば付与される)] の配列を返してやると、各日付の選択可/選択不可、見た目などを調整できる。

https://api.jqueryui.com/datepicker/

var holidays = ['20190101', '20190102', '20190103', '20190114', '以下略'];
$('.datepicker').datepicker({
beforeShowDay: function (date) {
var ymd = date.getFullYear() + ('0' + (date.getMonth() + 1)).slice(-2) + ('0' + date.getDate()).slice(-2);
if (holidays.indexOf(ymd) != -1) {
// 祝日
return [false, 'ui-state-disabled'];
} else if (date.getDay() == 0) {
// 日曜日
return [false, 'ui-state-disabled'];
} else {
// 平日
return [true, ''];
}
}
});

結果

応用

クラス指定とスタイルシートを使えば、日曜・祝日を赤い色にする、土曜日を青くするなど表示を変えることも可能。

関連するメモ

コメント