「jQuery」カレンダーDatepickerでFrom日付、To日付選択不可にするサンプル
環境
jquery 3.6.0
Google Chrome 104.0.5112.81
書式
1.カレンダー選択できる最小の日付(minDate)としてselectedDateをoptionで設定します
onSelect: function(selectedDate) { $("#To日付のセレクタID").datepicker("option","minDate",selectedDate); }
Fromのカレンダーで日付を選択すると、Toのカレンダーを開いた時にFromで選択された日付より前の日は非活性で選択できなくなります。
2.カレンダー選択できる最大の日付(maxDate)としてselectedDateをoptionで設定します
onSelect: function(selectedDate ) { $("#From日付のセレクタID").datepicker("option","maxDate",selectedDate); }
Toのカレンダーで日付を選択すると、Fromのカレンダーを開いた時にToで選択された日付より後の日付は非活性で選択できなくなります。
使用例
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script> <script> $(function() { /*From入力欄に対するカレンダーの設定*/ var regFrom = $("#regFrom").datepicker({ /*カレンダーで日付をクリックしたら実行*/ onSelect: function(selectedDate) { /*最小の日付(minDate)としてselectedDateをoptionで設定*/ $("#regTo").datepicker("option","minDate",selectedDate); } }); /*To入力欄に対するカレンダーの設定*/ var regTo= $("#regTo").datepicker({ /*カレンダーで日付をクリックしたら実行*/ onSelect: function(selectedDate ) { /*最小の日付(maxDate)としてselectedDateをoptionで設定*/ $("#regFrom").datepicker("option","maxDate",selectedDate); } }); }); </script> </head> <body> <!--From入力欄 --> <p>検索開始日: <input type="text" id="regFrom" /><br> <!--To入力欄 --> 検索終了日: <input type="text" id="regTo" /></p> </body> </html>
実行結果
テスト結果1
「検索開始日」欄に「12」を選択すると、入力欄に「2022/08/12」が表示されます。 「検索終了日」欄をクリックしたらFromで選択された日付「2022/08/12」より前の日は非活性で選択できなくなります。 [2022/08/12]以降の日付の選択は活性になります。
テスト結果2
「検索終了日」欄に「12」を選択すると、入力欄に「2022/08/12」が表示されます。 [検索開始日]欄をクリックしたら、Toで選択された日付より後の日付「2022/08/12」は非活性で選択できなくなります。 「2022/08/12」以前の日付の選択は活性になります。