この記事をシェアする

jQuery UI Datepickerで特定の日付や曜日だけ選択できないようにする方法をいつも忘れるのでメモっておこうと思った次第

今更jQuery UIですか? とは自分でも思わなくもないんだけども実際便利なんだもんこれ。
楽だし。まだまだjQuery離れはできそうにないや。

<script>
jQuery(function() {
    // 臨時休業日
    const temporary_holidays = ['2021-08-25','2021-08-26'];
    // 定休日 0は日曜 6は土曜
    const holidays   = [0, 6];
    jQuery('#target').datepicker(
        {
            dateFormat: 'yy-mm-dd',
            beforeShowDay: function (date) {
                var year  = date.getFullYear();
                var month = ('0' + (date.getMonth() + 1)).slice(-2);
                var day   = ('0' +  date.getDate()).slice(-2);
                var ymd = year + '-' + month + '-' + day;
                if (temporary_holidays.indexOf(ymd) !== -1) {
                    return [false];
                }
                if (holidays.indexOf(date.getDay()) !== -1) {
                    return [false];
                }
                return [true];
            }
        }
    );
});
</script>

Datepickerを設定する際に、 beforeShowDayってオプションを利用すれば良い。
このオプションに設定した関数は、カレンダーの日付セルが書き出される直前に都度実行される。
関数の実行結果でtrueが返ってきたセルは有効となり、falseだったら無効になるって寸法。
あとはまあ、特定の日付だったら、あるいは特定の曜日だったらfalseを返す処理を関数内に仕込めばOKってわけ。

実際に上記のスクリプトを適用したinput欄が↓になります。

この記事をシェアする