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

更新日: 公開日:2015/09/11
jQueryでカレンダーを実装

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

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

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

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

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

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

オプション初期値内容
numberOfMonths1一度に何ヶ月分のカレンダーを表示させるか指定します。
showCurrentAtPos0今月分のカレンダーを全体の何番目に表示させるのか、表示位置を指定します。一番最初は「0」二番目であれば「1」になります。
stepMonths1カレンダー上部の左右にある、隣の月へ移動するための三角アイコンを押したとき、何ヶ月単位で移動するか設定します。通常は、一度に表示するカレンダーの数と同じ数値(numberOfMonths と同じ)を設定します。
showButtonPanelfalseカレンダー下部にボタン表示領域を用意します。次に説明する「今日」の日付ボタンを表示させるために必要な項目です。
gotoCurrentfalseボタン表示領域に現在日付を設定できる「今日」ボタンを表示します。showButtonPanel とセットで設定する必要があります。

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

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

Datepicker で3ヶ月分のカレンダーを表示【HTML】
<input type="text" id="xxdate" />

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

Datepicker で3ヶ月分のカレンダーを表示【JavaScript】
$(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行目)は不要であれば削除してください。

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

日付:

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

  • カレンダーを3ヶ月分表示
  • 現在の月を中央に表示
  • 左右上部の三角アイコンをクリックすると3ヶ月単位でページ遷移
  • 左下の [今日] ボタンで当月のカレンダーへ戻る

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

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

\ この記事をシェアする /

このブログの運営者

NJ

Web系メインで従事していた元システムエンジニア。現在は個人事業主として独立。Webサイト運営における「困った問題」の解決方法をブログで発信。Web サイト運営、ポップデザインや動画制作など、パソコンでモノづくりをしている。