「jQuery」カレンダーDatepickerの日付選択範囲(minDateとmaxDate)を設定する
環境
jquery.min.js 3.6.0
jquery-ui.min.js 1.13.1
書式
日本語のカレンダー設定
$.datepicker.setDefaults($.datepicker.regional[“ja"]);
$(セレクタID).datepicker({
//minDateに今日の日付を指定する
minDate: new Date(),
//maxDateに数値の日を指定する
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> <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() { //日本語の設定 $.datepicker.setDefaults($.datepicker.regional["ja"]); //datepickerでカレンダーを開きます $("#startdate").datepicker({ //minDateに今日の日付を指定する minDate: new Date(), //maxDateに5日を指定する maxDate: '+5d' }); }); </script>
実行結果
minDateに今日の日付を指定しています。今日より前の日はクリックできません。
maxDateに5日を指定しています。5日より先の日はクリックできません。