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

2017/02/15 ,

jQuery UI を利用してカレンダーによる入力補助機能を提供する Datepicker プラグインですが、オプション設定することでより便利に使いやすくすることができます。

契約情報などの期間指定で入力するような場合、一年先であったり、はたまた十年先の日付を入力するような場合があります。初期状態の場合は、1ヶ月ずつカレンダーを移動して該当の日付までたどり着かなくてはいけません。半年先の場合でも複数回のカレンダーのページ移動が発生します。

今回は Datepicker のカレンダー表示において、年月をプルダウン選択できるようにし、過去や未来の日付を簡単に選択できるようにするオプション設定を紹介します。

なお jQuery UI の Datepicker の基本的な利用方法については、以前のエントリーを参照ください。

カレンダー表示で日付入力が簡単になる jQuery UI の Datepicker
テキストボックスを選択すると、カレンダーがポップアップ表示し、選択した日付がテキストボックスに反映される仕組みは、一般的な Web アプリケーションや予約サイトで独自...

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

まずは HTML から。ID を指定したテキストボックスです。例としてid 属性を利用していますが、class 等を用いても構いません。

続いて Javascript のコードです。カレンダーの年をプルダウン表示にするオプションは「changeYear」、そして月をプルダウン表示にするオプションは「changeMonth」になります。オプション設定値の詳細については、以下をご覧ください。

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

それぞれを設定すると、Javascript のコードは以下のようになります。

また、標準のスタイルシートでは、select ボックスの余白が大き過ぎて文字切れを起こしてしまったので、次のようなスタイルシートを定義して上書きしています。

では、実際に動作を確認してみましょう。

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

日付
↑このテキストボックスをクリックしてください。

初期状態では全く選択できない項目だったので、側近の日付を選択するエリアでない限りは、オプションとして設定しておいても無駄にはならないと思います。また、別途紹介していますが、カレンダーの土日に色を付ける方法は、以下の記事を参考にしてください。

jQuery UI の Datepicker でカレンダーの土曜日/日曜日の背景色を変える方法
jQuery UI の Datepicker はカレンダー表示してテキストボックスへ日付を設定できる便利なプラグインです。前回は複数月のカレンダーを表示させる方法につ...

年プルダウンの選択領域を制限する

カレンダーの年プルダウンの表示幅は、初期状態では現在の日付から前後十年が選択できるようになっています。そして一度日付を選択すると、その選択した日付に対する前後十年が選択できるようになります。つまり何十年、何百年も先の未来日付を選択することも可能となっています。

しかし「yearRange」のオプションを利用することで、選択できる年プルダウンの領域に制限を掛けることができます。

オプション内容
yearRange年選択プルダウンの表示範囲を制御する。
“-XX:+YY” : システム日付の年から XX年前 ~ YY年後まで選択可能 (選択幅は固定)
“C-XX:C+YY” : 現在の日付、もしくは既に選択された日付の年から XX年前 ~ YY年後まで選択可能 (選択日付により動的に変動)
未設定時の初期値は “C-10:C-10” となります。

こちらのオプション値は、数値や bool 型ではないため、文字列としてダブルクォートで囲って設定する必要があるので注意してください。では、実際に例をみてみましょう。

システム日付の年に対し、2年前から5年後まで選択可能にするサンプル

HTML は先程と変わりません。changeYear と changeMonth を設定し、更に yearRange を設定する Javascript のソースがこちらです。

日付
↑このテキストボックスをクリックしてください。

現在の年が 2015年の場合、2年前の 2013年から 5年先の 2020年まで選択できるようになります。また、別の年を選択しても、選択できる範囲は 2013年から 2020年までの範囲から動きません。もし選択された日付に対して動的に選択幅を切り替えるのであれば、yearRange オプションの設定値の頭に “C” をつけてあげれば OK です。

また、yearRange オプションで年選択の制限を行うと、左上と右上にあるカレンダーのページング用アイコンをクリックしても、選択可能な年までしか移動しないようになります。上記例の場合は、カレンダーのページ移動により 2012年や 2021年のカレンダーを表示することはできません。

この例を応用すると、期間指定をする場合に from の日付に合わせて、to の日付の選択領域を制限するといった制御を行うことも可能になります。ただ業務ロジックが頻繁に変わるような場合は、連動させて入力制限してしまうより、処理後の入力チェックで実装した方が管理しやすいでしょうね。

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

PAGE TOP ↑