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

2017/02/15 ,

jQuery UI の Datepicker は、カレンダーを表示するためのプラグインです。前回のエントリーで、日本語環境に適用させる等、基本的な実装方法について紹介しました。

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

直感的にカレンダーから入力できるのは便利ではありますが、「じゃらんnet」のように複数月のカレンダーを表示したい等、初期設定の状態ではユーザーのニーズに答えられないケースもあります。

しかし、そんなユーザーニーズも Datepicker のオプションを利用すれば解決することができます。今回は、例示に挙げた複数月のカレンダーを表示する方法を紹介します。Datepicker のオプション内容を身に付ければ、ユーザインタフェースの向上にも一役買ってくれるので、是非とも覚えてください。

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

通常、Datepicker でカレンダーを表示すると、システム日付の当月分しか表示されません。しかし、以下のように オプションを設定することで、指定の月数分を一気に表示させることが出来るようになります。

まずは HTML から。単に ID を指定したテキストボックスです。jQuery で処理するので、id 属性ではなく、class 等を用意しても構いません。

続いて Javascript です。複数月のカレンダーを表示するオプションは「numberOfMonths」になります。横に何ヶ月分のカレンダーを表示するかを、数値により指定します。単に複数月を表示させるだけであれば、このオプションだけで実装できます。しかしこれだけでは、利用する立場から少し不便な点があるので、それを改善すべく以下のオプションを追加します。

オプション内容
showCurrentAtPos現在の月を何番目に表示させるか、表示位置を指定できます。一番左であれば「0」を指定します。二番目であれば「1」となります。
stepMonthsカレンダー上部の角にある三角のアイコンをクリックした時に、何ヶ月単位でカレンダーのページ遷移をするか設定します。何も設定しなければ、複数月のカレンダーを表示しても、ひと月単位でのカレンダー遷移となります。
showButtonPanelカレンダー下部にボタンパネルを表示します。次に説明する今日日付を表示させるために、セットで設定する必要があります。初期設定は非表示 (false) です。
gotoCurrentボタンパネルに当日日付のボタンを表示します。初期設定は非表示 (false) です。ボタンパネルが非表示になっていると、このオプションを設定しても表示されません。

オプションは {} で括り、「(オプション名) : (設定値)」のフォーマットで記載します。今回のように複数オプションを設定する場合は、カンマ区切りで複数列挙することができます。

それでは実際にサンプルプログラムの動作を確認しましょう。

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


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

現在の月が真ん中に表示され、3ヶ月表示となっています。また左上、右上のカレンダーのページングアイコンをクリックすると、3ヶ月単位で移動していることがわかります。複数月表示させると、移動しすぎて当日日付まで戻りたいケースもありますので、そんな時は右下の [今日] ボタンをクリックすれば、当日日付までカレンダーが戻ります。

あと、こっそり土曜と日曜の背景色が変わるように仕掛けたのですが、これはオプションでは設定できない情報です。祝日に色を付けるのはプログラムを組み込む必要があるのですが、土曜日と日曜日だけであれば、簡単に色を付けることができます。そちらの方法については、以下のエントリーを参照ください。

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

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

PAGE TOP ↑