jQuery UI の Datepicker で複数の月のカレンダーを表示する方法

jQuery UI の Datepicker は、カレンダーを表示するためのプラグインです。ベースとなる実装方法、ならびに日本語対応の手順については、次のページを参照ください。

jQuery UI でカレンダーを表示する Datepicker の使い方！テキストボックスの日付入力が簡単になる？！

テキストボックスの日付入力をカレンダーから選択できるようにしたい！そんな要望を叶えてくれるのが JavaScript の拡張ライブラリ jQuery UI の Dat...

Datepicker は、最も単純なカレンダー表示のみの実装だと、使い勝手があまり良くありません。そこでこのプラグインに用意されている拡張機能を使って、もっとカレンダーを使いやすくしましょう。

今回紹介するのは、カレンダー表示時に複数月（例えば現在の日付の前後１ヶ月含む３ヶ月分）を一気に表示させる方法です。

Datepicker で複数月のカレンダーを表示する

Datepicker の初期表示は今月分のカレンダーです。このカレンダー呼び出し処理において、オプションを設定すれば複数月のカレンダーを一気に表示できるようになります。

複数月のカレンダーを表示させるオプション設定

オプション項目は Datepicker 呼び出し時の引数として設定します。 {} カッコでくくり「オプション名 : 設定値」のフォーマットで書きます。複数オプションを設定する場合、カンマ区切りで指定します。

では現在日付の前後１ヶ月分、つまり一度に３ヶ月分のカレンダーを表示させるサンプルプログラムをご覧ください。

<input type="text" id="xxdate" />

テキストボックスの属性は id ではなく class でも大丈夫です。同一画面上に複数のカレンダー入力項目がある場合は、class で指定したほうが便利です。

$(function() {
  $("#xxdate").datepicker( {
    numberOfMonths: 3,     // 3ヶ月分表示
    showCurrentAtPos: 1,   // 表示位置は左から2番目 (真ん中)
    stepMonths: 3,         // 月の移動を3ヶ月単位とする
    showButtonPanel: true, // ボタン領域を表示
    gotoCurrent: true      // ボタン領域に「今日」ボタンを表示
  } );

  // 日本語化
  $.datepicker.regional['ja'] = {
    closeText: '閉じる',
    prevText: '<前',
    nextText: '次>',
    currentText: '今日',
    monthNames: ['1月','2月','3月','4月','5月','6月',
    '7月','8月','9月','10月','11月','12月'],
    monthNamesShort: ['1月','2月','3月','4月','5月','6月',
    '7月','8月','9月','10月','11月','12月'],
    dayNames: ['日曜日','月曜日','火曜日','水曜日','木曜日','金曜日','土曜日'],
    dayNamesShort: ['日','月','火','水','木','金','土'],
    dayNamesMin: ['日','月','火','水','木','金','土'],
    weekHeader: '週',
    dateFormat: 'yy/mm/dd',
    firstDay: 0,
    isRTL: false,
    showMonthAfterYear: true,
    yearSuffix: '年'};
  $.datepicker.setDefaults($.datepicker.regional['ja']);
});

日本語化のソース（10～29行目）は不要であれば削除してください。

複数月のカレンダーを表示するサンプル

オプションの設定により、次のような表示ができるようになりました。

他にも様々なオプションが用意されているので、参考にしていただければと思います。

jQuery UI の Datepicker でカレンダーを月曜始まりにする方法

jQuery UI の Datepicker は、カレンダーを表示するためのプラグインです。基本となる実装方法、ならびに日本語対応の手順については、次のページを参照く...

以上、jQuery UI の Datepicker で複数月のカレンダーを表示させる方法でした。