「jQuery」カレンダーDatepickerの年と月をプルダウン表示にするサンプル

2022年4月18日

環境
jquery.min.js 3.6.0
jquery-ui.min.js 1.13.1

書式

$( "#セレクタID" ).datepicker({
      changeYear: true, 
      changeMonth: true, 
      minDate:　xxx
      maxDate: xxx

changeYearにtrueを指定して、年がプルダウン表示になります。
changeMonthにtrueを指定して、月がプルダウン表示になります。
「minDate」はブルダウンに表示される下限の年月を指定しています。
「maxDate」は表示される上限の年月を指定しています。

使用例

<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でカレンダーを開きます
            $("#startdate").datepicker({
  		changeYear: true, //年を表示
            changeMonth: true, //月を選択
            minDate: '-1y -3m', //現在から1年3ヶ月前まで
            maxDate: '+1y +1m' //現在から1年3ヶ月後まで
        });

      });
</script>

実行結果
年と月がプルダウン表示されます。ブルダウンに表示される下限(上限)の年月が表示されます。