jQuery UI の Datepicker で年月をプルダウンから選択する方法

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

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

Datepicker のカレンダーは上に年月が表示され、通常は左右の三角アイコンから隣の月に移動できるようになっています。ただ、数年前や数年先の日付を指定するには何度も移動しなくてはいけないため、使い勝手が良くありません。

しかしそれは初期設定のカレンダーに限った話です。Datepicker プラグインには便利なオプションが数多く用意されており、この年月をプルダウンから選択できるように変更することができます。

では、具体的なオプション設定の方法について解説していきましょう。

Datepicker でカレンダーの年月をプルダウン表示にする

年月をプルダウン化するオプション設定

オプション内容
changeYearカレンダーの年をプルダウン選択にする。
false : プルダウン表示しない(初期値)
true : プルダウン表示する
changeMonthカレンダーの月をプルダウン選択にする。
false : プルダウン表示しない(初期値)
true : プルダウン表示する

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

では年月をプルダウン表示にするサンプルプログラムをご覧ください。

Datepicker の年月をプルダウン化【HTML】
<input type="text" id="xxdate" />

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

Datepicker の年月をプルダウン化【JavaScript】
$(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行目)は不要であれば削除してください。

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

Datepicker の年月をプルダウン化【CSS】
/* 年プルダウンの変更 */
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年選択プルダウンの表示範囲を制御します。(初期値 "C-10:C-10")
"-XX:+YY" : 現在日付の年を基準に XX 年前 ~ YY 年後までを選択対象にする
"XXXX:YYYY" : XXXX年からYYYY年までを選択対象にする
"C-XX:C+YY" : 現在日付、もしくは既に選択された日付の年を基準に XX 年前 ~ YY 年後までをプルダウンに表示する

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

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

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

Datepicker の年プルダウンの範囲を制限【JavaScript】
$(function() {
  $("#xxdate").datepicker( {
    changeYear: true,  // 年選択をプルダウン化
    changeMonth: true,  // 月選択をプルダウン化
    yearRange: "-2:+5" // 現在日付の2年前~5年後まで選択可能
  } );
});

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

日付:

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

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

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

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

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

このブログの運営者

NJ

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