カレンダー表示で日付入力が簡単になる jQuery UI の Datepicker

2017/02/15 ,

テキストボックスを選択すると、カレンダーがポップアップ表示し、選択した日付がテキストボックスに反映される仕組みは、一般的な Web アプリケーションや予約サイトで独自に組み込まれているケースが多く見受けられます。しかし、今回紹介する jQuery UI の Datepicker プラグイン を利用することで、簡単にカレンダー入力を実装することができます。

Datepicker を利用するには、jQuery UI のライブラリを読み込めば良いです。読み込む必要があるのは、以下の 3ファイルのみです。

jQuery UI 利用時に必要なライブラリ

  • jQuery の Javascript ファイル
  • jQuery UI の Javascript ファイル
  • jQuery UI のスタイルシートファイル

また、CDN からライブラリファイルを取得して利用することもできます。

jQuery UI ファイルの読込みを Google の Libraries サイト (CDN) から参照する方法
※ 2015/9/2 記事内のjQuery UI のバージョンを 1.10.3 から 1.11.4 へ変更しました。jQuery UI を利用するには、jQu...

jQuery UI でカレンダー表示による日付入力を実装

Datepicker の年月日、曜日を日本語にローカライズする

jQuery UI を利用するには 3ファイル読込む必要があると述べましたが、Datepicker を利用する場合は日本語表記にするため、更に日本語化用のファイルを読込む必要があります。ver.1.11 以降はダウンロードファイル内に Datepicker をローカライズするスクリプトファイルが含まれなくなってしまいました。

以下、Google の CDN のからファイルを参照できるので、そちらを読み込むことも可能です。ネットワークから閉じた環境で利用する場合は、このファイルをダウンロードするか、もしくはこの Javascript のファイルの中身を直接ソースに書いてしまえば、日本語にローカライズできます。

このファイルの中身が次のコードになります。20行程度なので、ローカライズ用に別ファイルとして読み込むよりは、クライアントスクリプトファイルへ直接記載してしまった方が良いかもしれません。

プログラム実装サンプル

以下のサンプルは、テキストボックスをクリックした際にカレンダーを表示し、選択した日付がテキストボックスへ返却されるプログラムです。では、まず HTML から。

ただテキストボックスを用意しただけです。続いて Javascript です。

対象のテキストボックスの要素に対し、.datepicker() と定義するだけでカレンダーを呼び出すことが出来るようになります。L.4 ~ L.23 は、日本語ローカライズする場合に必要な情報ですが、別ファイルとして読み込む場合は、これらのコードは不要になります。

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

カレンダー表示による日付入力のサンプル

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

このように簡単に実装できます。

ここから更に週末や祝日の背景色を変更するような場合、別途プログラムを組んで祝日マスタのようなデータを読込み、背景色を変えるためのクラスを組込むような仕掛けを作る必要があります。出来ないわけではないのですが、かなり手間が掛かりますので、こちらは機会があれば紹介しようと思います。

以上、カレンダーを表示して日付情報を入力できる jQuery UI の Datepicker のご紹介でした。

PAGE TOP ↑