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

2022年8月12日

環境
jquery 3.6.0
Google Chrome 104.0.5112.81

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

$.datepicker.setDefaults({

minDate: '-数値d',

maxDate: '+数値d'

});

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

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

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

使用例

<!DOCTYPE html>

<html>

<head>

$(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>

<!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>

<!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

関連投稿: