「jQuery」カレンダーDatepickerでFrom日付、To日付選択不可にするサンプル

2022年8月12日

環境
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」以前の日付の選択は活性になります。

jQuery

Posted by arkgame

関連記事: