「jQuery」カレンダーDatepickerに表示する月を増やす方法

2022年4月18日

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

書式

$("#セレクタID").datepicker({
　　 //表示される月の数
   numberOfMonths:月数 
});

numberOfMonthsに数値を指定して、カレンダーに表示する月を増やします。

使用例

<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({
            //numberOfMonthsに2を指定して、表示する月を増やす
  		    numberOfMonths:2
        });

      });
</script>

実行結果
カレンダーに表示する月数に2を指定して月を増やします。入力欄をクリックすると、カレンダーに２つ月が表示されます。