jQuery UIの「Datepicker」のカレンダーでは、簡単に選択可能範囲を設定できます。
たとえば、明日以降〜30日以内のみ選択可能としたい場合、minDateとmaxDateオプションを使うことですぐに実装可能です。
目次
DatepickerのminDate、maxDateの使い方
minDate: 選択可能な最小日付を指定maxDate: 選択可能な最大日付を指定
数値を指定した場合
$(function () {
$("#datepicker").datepicker({
minDate: 1, // 明日以降を選択可能
maxDate: 30 // 30日後まで選択可能
});
});この場合、「明日以降〜30日以内」が選択可能範囲となります。
「今日」「1ヶ月」などを指定する場合
$(function () {
$("#datepicker").datepicker({
minDate: new Date(), // 今日以降を選択可能
maxDate: "+1M" // 1ヶ月後まで選択可能
});
});new Date()で今日の日付を設定、”+1M”で「現在から1ヶ月後」が設定可能。この場合、「今日〜1ヶ月後」が選択可能範囲となります。
そのほかにも、"+1w"（1週間後）、"+7d"（7日後）などが指定可能です。
minDate、maxDateを更新する
$("#datepicker").datepicker("option", "minDate", "2024-12-01");
$("#datepicker").datepicker("option", "maxDate", "2024-12-31");これにより、minDateとmaxDateを変更可能です。
3つめには以下の形式が指定可能です。
- 日付（例：
"2024-12-01"） Dateオブジェクト（例：new Date(2024, 11, 1)）- 相対的な値（例：
"+1w"）
minDate、maxDateをリセットする
$("#datepicker").datepicker("option", "minDate", null);
$("#datepicker").datepicker("option", "maxDate", null);