「jQuery」複数カレンダーDatepickerに同じ設定を行うサンプル
環境
jquery.min.js 3.6.0
jquery-ui.min.js 1.13.1
書式
$.datepicker.setDefaults({ minDate: '-数値d' maxDate: '+数値d' });
今日からプラスマイナス数値の日を設定します。
開発元
https://api.jqueryui.com/datepicker/
使用例
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.1/themes/smoothness/jquery-ui.css"> <!-- テキスト入力欄 --> <p>開始日: <input type="text" id="startdate" /></p> <p>終了日: <input type="text" id="enddate" /></p> <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.13.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() { //今日からプラスマイナス3日 $.datepicker.setDefaults({ minDate: '-3d', maxDate: '+3d' }); //datepickerでカレンダーを開きます $("#startdate").datepicker({ //閉じるボタンを表示 showButtonPanel: true }); $("#enddate").datepicker({ //閉じるボタンを表示 showButtonPanel: true }); }); </script>
実行結果
テキスト入力欄が「開始日」と「終了日」2つあります。
setDefaultsでクリックできる日付の範囲を設定しています。