jQuery UI Datepicker を試してみる(導入編)

日付をテキストボックスへ入力を支援のために、カレンダーを表示して選べるようにするのは便利です。しかし実装はなかなか大変です。そのような手間をすでにライブラリとして提供してくれる Datepicker (jQuery UI Datepicer) というものがあります。

見た目もなかなか良くて、機能も充実しているのでお勧めです。

jQuery UI Datepicker は、ポップアップでカレンダーを表示して(常に表示も可能)日付を選ぶと関連付けしたテキストボックスへ値を日付形式でテキストボックスに表示します。(下図参照)

jQuery UI Datepicker (カレンダー)の表示例
jQuery UI Datepicker (カレンダー)は日付入力の支援を簡単に実現できます。

導入

まずは、インストールです。HTTP サーバーのアクセスできる場所へ jQuery, jQuer-UI を展開します。 CentOS の Apache のデフォルト設定を例に説明します。

ドキュメント ルート(/var/www/html/) の下に “lib/jquery” フォルダを作成します。

/var/www/html/lib/jquery/

(※ jQuery ライブラリは jQuery UI ライブラリにバンドルされているものを使用します。)
最初に、jQuery UI ライブラリを http://jqueryui.com/download からダウンロードしてきます。

  1. 「Download jQuery UI 1.9.0」をクリック
  2. 「ダウンロードビルダー」ページで全項目をチェックしておきます。それからページ最後尾にある「Themes」のセクションからテーマをコンボボックスから選びます。ここでは “Redmond” を選びことにしました。最後に「Download」ボタンをクリックします。

この zip ファイルを /var/www/html/lib/jquery/ へ展開します。

- css/
  - redmond/
      jquery-ui-1.9.0.custom.css
      jquery-ui-1.9.0.min.css
+ development-bundle/
- js/
  + i18n/
  jquery-1.8.2.js
  jquery-ui-1.9.0.custom.js
  jquery-ui-1.9.0.custom.min.js
index.html

次に、Datepicker の日本語用のリソース jquery.ui.datepicker-ja.js を http://jquery-ui.googlecode.com/svn/trunk/ui/i18n/からダウンロードして、/lib/jquery/js/i18n へ配置します。

(jquery-ui-1.9.2 では “development-bundle/” フォルダ配下の “ui/i18n/” に “jquery.ui.datepicker-ja.js” がありますので、コピーして使用することができます。)

ライブラリのディレクトリ構造はこのようになります。

- css/
  - redmond/
      jquery-ui-1.9.0.custom.css
      jquery-ui-1.9.0.min.css
+ development-bundle/
- js/
  - i18n/

jquery.ui.datepicker-ja.js

  jquery-1.8.2.js
  jquery-ui-1.9.0.custom.js
  jquery-ui-1.9.0.custom.min.js
index.html

JQuery UI Datepicker を使用する Web ページの HEAD 部分に以下のライブラリとCSSを記述します。

<link rel="stylesheet" type="text/css" media="screen" href="lib/jquery/css/redmond/jquery-ui-1.9.0.custom.css" />
<script type="text/javascript" src="lib/jquery/js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="lib/jquery/js/jquery-ui-1.9.0.custom.min.js"></script>
<script type="text/javascript" src="lib/jquery/js/i18n/jquery.ui.datepicker-ja.js"></script>

実装

簡単なカレンダーを作成してみます。

<script type="text/javascript">
    $(function() {
        // Datepicker の初期化
        $( "#datepicker" ).datepicker();
        // テキストボックスにフォーカスが当たった時と
        // ボタンがクリックされたときにカレンダーを表示するオプション
        $( "#datepicker" ).datepicker( "option", "showOn", 'both' );
    });
</script>

... 省略 ...

<p>日付: <input type="text" id="datepicker" /></p>

... 省略 ...

この1行だけでカレンダーの表示ができるようになります。テキストボックスにフォーカスがあたるとカレンダーが表示されます。

$( "#datepicker" ).datepicker();

次の1行は日付テキストボックスの横に […] ボタンを表示して、フォーカスが当たった場合と、そのボタンがクリックされるとカレンダーを表示するオプションです。

$( "#datepicker" ).datepicker( "option", "showOn", 'both' );

そして、Datepicker と関連付けするテキストボックスです。テキストボックスのIDに “datepicker” を指定するだけです。

<p>日付: <input type="text" id="datepicker" /></p>

動作確認

こちらで確認できます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です