ミギムキ

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

「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です。