「jQuery」複数カレンダーDatepickerに同じ設定を行うサンプル

2022年4月18日

環境
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>

実行結果
テキスト入力欄が「開始日」と「終了日」２つあります。
setDefaultsでクリックできる日付の範囲を設定しています。