カレンダーアイコンを利用して jQuery UI の Datepicker のカレンダーを呼び出す方法

2017/02/15 ,

テキストボックスに日付を設定する際に、カレンダーから選択できるようにする jQuery UI の Datepicker プラグインの利用方法について、これまでいくつか紹介してきました。

これらは、標準のオプションを利用したり、CSS の設定を駆使したりと、呼びだされたカレンダーをどのように表示するかについて焦点を当てて説明をしてきました。今回はこれまでと趣旨が異なり、カレンダーアイコンをクリックするとカレンダーが表示される仕組みを実装する方法について説明します。

カレンダーアイコンから Datepicker のカレンダーを呼び出す

この Datepicker はテキストボックスにフォーカスが当たった時点でカレンダーが表示される仕様となっているため、ユーザー側からはテキストボックスを選択するまでカレンダー入力出来ることが分かりません。もしこのテキストボックスの横にカレンダーの画像があれば、カレンダーを利用して入力出来る項目であることが一目瞭然で分かります。

どちらにせよデータ入力時に該当項目にフォーカスを当てるので蛇足感はありますが、見た目の印象でカレンダーアイコンがあると安心感があるのは確かではないでしょうか。

それでは実際にサンプルコードをご覧ください。まずは、HTML です。これまでと変わった点はありません。

続いて Javascript です。

今回利用するオプションは以下の通りです。

オプション内容
buttonImageカレンダーのアイコン画像の URL を定義します。画像ファイルは各自ご用意ください。相対パスで定義することも可能です。
buttonTextカレンダーアイコンにマウスがあたった時に表示するツールチップの文言を定義します。設定しなくてもほとんど困ることはないため、除外しても構いません。
buttonImageOnly単に画像として表示するか、ボタンとして表示し、ボタン内に画像を表示させるかを定義します。
true: 画像のみ表示
false: ボタン上に画像を表示 (初期値)
showOnカレンダーを表示するイベントを制御するための定義です。button または both を設定しないと、カレンダーアイコンが表示されません。ユーザーの利便性を考えると、both 設定が望ましいです。
focus: テキストボックス選択時のみカレンダーを表示 (初期値)
button: カレンダーアイコンクリック時のみカレンダーを表示
both: 上記どちらのパターンでもカレンダー表示

カレンダー画像イメージにマウスがあたった場合に、カーソルが変わるようにスタイルシートも設定しておきましょう。テキストボックスとカレンダーアイコンが近すぎると見栄えが悪くなるので、ここではマージンの設定も加えています。実際に用意した画像ファイルに合わせて、適宜調整してください。

画像ファイルをクリックしたら Datepicker を呼び出すよう、オプションで設定できるので、実装そのものは簡単です。では実際に動作を確認してみましょう。

アイコンクリックによるカレンダー呼び出しサンプル

カレンダーアイコンがあるだけで、直感的にカレンダー入力できる項目であることが分かります。仕掛けは簡単ですが、日付入力項目が複数ある場合、全ての .datepicker() に全く同じオプションを定義するのは煩雑になってしまいます。そこでこの仕掛けの応用編として、複数の日付入力がある場合でも一括でカレンダーアイコンが設定されるよう、プログラムを改修してみましょう。

Datepicker 用テキストボックスへ一括でアイコンを設定する

複数のテキストボックスに対応できるのを確認するために、From – To の入力形式を持つ HTML をサンプルとして用意します。いくつあっても大丈夫であることを示すために、4つくらい仕掛けてみましょうか。

単に ID が設定されたテキストボックスを 4つ用意しただけです。続いて、スクリプト側のソースもご覧ください。

.setDefaults() を利用することで、オプションの初期値を変更することができます。 .datepicker() を仕掛ける前に定義することで、以降すべての Datepicker に対し、同じオプション設定が適用されるようになります。L.4 ~ L.9 は一度記述すれば、画面内に Datepicker の対象となるテキストボックスがいくら増えても対応できるようになっています。

では実際にサンプルで動作を確認してみましょう。

テキストボックススへ一括でカレンダーアイコンを仕掛けるサンプル

期間1
期間2

単にカレンダーが表示されるだけでなく、そのカレンダーから選択した場合にきちんと対象のテキストボックスに日付が設定されるところまで確認してみてください。

入力画面がいくつもあるシステムや日付入力項目が多い場合は、この初期値変更処理を共通処理として別定義しておくと良いでしょう。画像 URL も一箇所で定義することになる上、必要なければこのカレンダーアイコンをセットするオプション設定処理自体を取り除けば良いのですから。

テキストボックスが Readonly でもカレンダーは表示される

フォーマットのチェックが面倒なので、必ずカレンダーから選択して日付を入力させたい場合は、テキストボックスに readonly 属性を設定すれば OK です。今回紹介したカレンダーアイコンからの呼出しは、テキストボックスが readonly であってもきちんと動作します。

しかし用途によっては手入力できないことを嫌うケースもあるため、強制的に readonly を設定して制限してしまうのも正しい対応とは言えません。あくまで利用者がどう使いたいか次第です。

以上、カレンダーアイコンを利用して jQuery UI の Datepicker のカレンダーを呼び出す方法でした。

PAGE TOP ↑