jqueryuiのdatepickerで特定の曜日を選択不可にする

Tweet

Category JavaScript 2019/09/04

問題

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

答え

jqueryuiのdatepicker では、minDate オプションと maxDate オプションで、選択可能な範囲を制限することはできるが、特定の日や特定の曜日を指定して選択不可にするオプションはない。

特定の日や特定の曜日を選択不可にするのは、beforeShowDay オプションに関数を登録すると可能。

カレンダーの各日付のセルを表示するたびに呼ばれるので、[boolean（選択可能かどうか）, クラス名（指定すれば付与される）]を返してやるとよい。

例

$('.datepicker').datepicker({
    beforeShowDay: function (date) {
        if (date.getDay() == 0) {
            // 日曜日
            return [false, 'ui-state-disabled'];
        } else {
            // 平日
            return [true, ''];
        }
    }
});

結果

応用

祝日リストがあれば、曜日判定のところを、祝日判定に変えて、祝日は選択不能にしたり、祝日は赤い色にしたりすることも可能。