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

環境
jquery 3.6.0
Google Chrome 104.0.5112.81

書式
1.カレンダー選択できる最小の日付(minDate)としてselectedDateをoptionで設定します

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
onSelect: function(selectedDate) {
$("#To日付のセレクタID").datepicker("option","minDate",selectedDate);
}
onSelect: function(selectedDate) { $("#To日付のセレクタID").datepicker("option","minDate",selectedDate); }
onSelect: function(selectedDate) {
    $("#To日付のセレクタID").datepicker("option","minDate",selectedDate);
}

Fromのカレンダーで日付を選択すると、Toのカレンダーを開いた時にFromで選択された日付より前の日は非活性で選択できなくなります。
2.カレンダー選択できる最大の日付(maxDate)としてselectedDateをoptionで設定します

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
onSelect: function(selectedDate ) {
$("#From日付のセレクタID").datepicker("option","maxDate",selectedDate);
}
onSelect: function(selectedDate ) { $("#From日付のセレクタID").datepicker("option","maxDate",selectedDate); }
onSelect: function(selectedDate ) {
          $("#From日付のセレクタID").datepicker("option","maxDate",selectedDate);
}

Toのカレンダーで日付を選択すると、Fromのカレンダーを開いた時にToで選択された日付より後の日付は非活性で選択できなくなります。
使用例

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!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>
<!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>
<!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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
「検索開始日」欄に「12」を選択すると、入力欄に「2022/08/12」が表示されます。
「検索終了日」欄をクリックしたらFromで選択された日付「2022/08/12」より前の日は非活性で選択できなくなります。
[2022/08/12]以降の日付の選択は活性になります。
「検索開始日」欄に「12」を選択すると、入力欄に「2022/08/12」が表示されます。 「検索終了日」欄をクリックしたらFromで選択された日付「2022/08/12」より前の日は非活性で選択できなくなります。 [2022/08/12]以降の日付の選択は活性になります。
「検索開始日」欄に「12」を選択すると、入力欄に「2022/08/12」が表示されます。
「検索終了日」欄をクリックしたらFromで選択された日付「2022/08/12」より前の日は非活性で選択できなくなります。
[2022/08/12]以降の日付の選択は活性になります。

テスト結果2

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
「検索終了日」欄に「12」を選択すると、入力欄に「2022/08/12」が表示されます。
[検索開始日]欄をクリックしたら、Toで選択された日付より後の日付「2022/08/12」は非活性で選択できなくなります。
2022/08/12」以前の日付の選択は活性になります。
「検索終了日」欄に「12」を選択すると、入力欄に「2022/08/12」が表示されます。 [検索開始日]欄をクリックしたら、Toで選択された日付より後の日付「2022/08/12」は非活性で選択できなくなります。 「2022/08/12」以前の日付の選択は活性になります。
「検索終了日」欄に「12」を選択すると、入力欄に「2022/08/12」が表示されます。
[検索開始日]欄をクリックしたら、Toで選択された日付より後の日付「2022/08/12」は非活性で選択できなくなります。
「2022/08/12」以前の日付の選択は活性になります。

 

jQuery

Posted by arkgame