[jQuery] [Datepicker] 土日の日付を選べなくしたい

公開日:2021/12/03

「Datepicker」は、手軽に日付選択ができるようになるjQueryプラグインです。簡易的な予約フォームを作るときなどに重宝します。

予約フォームを作る際によくあるのが、店舗の営業していない土、日は予約できないようにしたいというケースです。

「Datepicker」で提供されているAPIを利用すれば、指定した曜日を選べなくすることができます。

サンプルコード

$('.datepicker').datepicker({
    minDate: 0,
    beforeShowDay: function(date) {
        if(date.getDay() == 0 || date.getDay() == 6) {
            // 日曜日、土曜日は非表示
            return [false, 'ui-state-disabled'];
        }
        else {
            // 平日
            return [true, ''];
        }
    }
});

サンプルコードの解説

「beforeShowDay」にfunctionを登録することで、各日付を表示する前に登録した処理を実行させることができます。

引数の「date」には表示しようとしている日付情報が格納されています。「getDay」関数を実行することで、曜日を判定することができます。

曜日の判定は0から6までの数字で、日（0）、月（1）、火（2）、水（3）、木（4）、金（5）、土（6）という形で紐付いています。

選べなくしたい曜日に対して return [false, 'ui-state-disabled']; とすることで、条件一致した曜日を選択不可にすることができます。

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。