[jQuery]複数のカレンダーDatePickerに同じ設定を行うサンプル

2022年8月12日

環境
jquery 3.6.0
Google Chrome 104.0.5112.81

書式
1.日付の範囲を設定します

$.datepicker.setDefaults({
            minDate: '-数値d',
            maxDate: '+数値d'
});

setDefaultsでクリックできる日付の範囲を設定しています。(今日からプラスマイナス指定数値の日)
2.複数のDatePickerを設定します
$( “#セレクタID" ).datepicker({});

使用例

<!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() {
   /*日付の範囲を設定*/
      $.datepicker.setDefaults({
            minDate: '-3d',
            maxDate: '+3d'
      });
    /*DatePickerに同じ設定を行う*/
      $( "#regdateA" ).datepicker({});
    $( "#regdateB" ).datepicker({});
});
</script>
</head>
<body>
<!--テキスト入力 -->
<p>作成年月日: <input type="text" id="regdateA" /></p>
<div>更新年月日: <input type="text" id="regdateB" /></div>

</body>
</html>

結果
テキスト入力欄「作成年月日」をクリックします。例2022年8月12日の場合、「9」、「10」、「11」と「13」、「14」、「15」が選択可能になります。

jQuery

Posted by arkgame

関連記事: