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

Tweet

Category JavaScript 2019/03/20

問題

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, ''];
        }
    }
});

結果

応用

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