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( {
    changeYear: true,  // 年選択をプルダウン化
    changeMonth: 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']);
});

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

なお日本語化対応すると、プルダウン周りの表示が少しずれてしまうのため、スタイルシートを追加して調整をしておきます。

/* 年プルダウンの変更 */
select.ui-datepicker-year{
  height: 2em!important;      /* 高さ調整 */
  margin-right:5px!important; /* 「年」との余白設定 */
  width:70px!important;       /* 幅調整 */
}
/* 月プルダウンの変更 */
select.ui-datepicker-month{
  height: 2em!important;      /* 高さ調整 */
  margin-left:5px!important;  /* 「年」との余白設定 */
  width:70px!important;       /* 幅調整 */
}

カレンダーの年月をプルダウン化するサンプル

初期状態では選択できない項目だったので、この設定だけでもかなり使いやすくなりますね。しかし、年の選択幅が前後10年と広範囲になっています。

そこで更にオプション設定を追加して、選択できる「年」プルダウンの範囲に制約を持たせてみましょう。

年プルダウンの表示範囲を変更するオプション

現在の日付を基準とした相対的な設定方法から、固定値で年の範囲を設定することができるようになります。

yearRange のオプション値は文字列になるため、ダブルクォートで囲って設定するのを忘れないようにしてください。

では JavaScript のソースを確認してみましょう。（日本語化の部分は省略しています。）

$(function() {
  $("#xxdate").datepicker( {
    changeYear: true,  // 年選択をプルダウン化
    changeMonth: true,  // 月選択をプルダウン化
    yearRange: "-2:+5" // 現在日付の２年前～５年後まで選択可能
  } );
});

カレンダーの年プルダウン選択範囲を制限するサンプル

一昨年から５年先まで選択できるようになります。この設定方法では最大５年先までが選択できる範囲になります。もし、選択範囲の上限を設けず、単にプルダウン上に表示する項目数を減らしたいのであれば "C-XX:C+YY" のフォーマットで設定してください。

また yearRange オプションで選択範囲を制限すると、範囲外の年のカレンダーを表示することも不可能になるのでご注意ください。

この例を応用すると、from – to の期間指定のような入力項目で、開始日の日付に合わせて終了日の選択範囲を変更するような制御も実装できるようになります。ただ処理が複雑になることもあるため、動的に選択範囲を変更するよりも「開始日＜終了日」の論理チェックを加えたほうが簡単に実装できます。

以上、jQuery UI の Datepicker で年月をプルダウンから選択できるようにするためのオプション設定方法でした。