[jQuery]複数のカレンダーDatePickerに同じ設定を行うサンプル
環境
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」が選択可能になります。