2013年7月18日
日付選択ボックスを実装するためのjQuery UIウィジェット「DatePicker」の基本的な使い方を説明。オプションにより、挙動や見栄えをさまざまにカスタマイズできる。
jQuery UIとは？
jQuery UIは、jQueryを拡張するライブラリ（プラグイン）の一種で、名前のとおり、ユーザー・インターフェイス（UI）に関わる機能を提供します。jQuery UIの導入方法や使い方、jQuery UIが提供する主要なコンポーネントについては、「jQuery UI逆引きリファレンス： jQuery UIを利用するには？」を参照してください。
DatePickerは、日付選択ボックスを実装するためのウィジェットです。テキストボックスにフォーカスを移動すると、カレンダーがポップアップし、選択した日付が元のテキストボックスに反映されます。
HTML5でも、<input type="date">要素で基本的な日付選択ボックスを作成できますが、DatePickerウィジェットでは、後で述べるようにオプションを与えることで、挙動や見栄えをさまざまにカスタマイズできます。HTML5に対応していないブラウザを使用しているユーザーもまだまだ少なくはありませんし、当面は用途と状況に応じて両者を使い分けていく必要があるでしょう。
基本的な日付選択ボックス
まずは、基本的な日付選択ボックスの例（以下はコードと、その実行結果）からです。
HTML
|
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>DatePickerウィジェット</title> <link type="text/css" rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/cupertino/jquery-ui.min.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script> <!--1国際化対応のライブラリをインポート--> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/i18n/jquery-ui-i18n.min.js"></script> <script type="text/javascript"> $(function() { // 2日本語を有効化 $.datepicker.setDefaults($.datepicker.regional['ja']); // 3日付選択ボックスを生成 $('#date').datepicker({ dateFormat: 'yy/mm/dd' }); }); </script> </head> <body> <form method="POST" action=""> <label> <input type="text" id="date" size="10" /> </label> </form> </body> </html> |
基本的な日付選択ボックスを生成するコード（date.html）
▼
テキストボックスにフォーカスを移動すると
カレンダーが表示されるので、日にちをクリック
▼
テキストボックスにフォーカスを移動すると、カレンダーを表示
DatePickerウィジェットを利用する際は、通常のライブラリに加えて、国際化対応のライブラリ（1）もインポートしなければならない点に注意してください。これはポップアップ・カレンダーの月や曜日などの表記を日本語表示するために必要なファイルです。執筆時点では、jQuery CDNでは提供されていないようですので、サンプルでもGoogle CDNを利用しています。
日本語を有効にするには、2のように$.datepicker.setDefaultsメソッドを呼び出します。「ja」（日本語）の部分は、言語に応じて変更してください。フランス語であれば「fr」、ドイツ語であれば「de」です。
あとは、datepickerメソッド（構文は下記のとおり）でDatePickerウィジェットを呼び出すだけです（3）。
［構文］DatePickerウィジェット
$(タブパネル).datepicker({ パラメーター名: 値, ... })
サンプルで利用しているdateFormatパラメーターは、選択された日付をテキストボックスに反映させるときに利用するフォーマット文字列です。デフォルトは「yy/mm/dd」ですので、この場合であれば省略しても構いません。例えば、月日だけを反映させたいという場合には、「dateFormat: 'mm/dd'」とします。フォーマット文字列の詳しいヘルプは、公式ページ（英語）を参照してください。
DatePickerウィジェットのパラメーター
dateFormatパラメーターのほかにも、DatePickerウィジェットにはさまざまなパラメーターが用意されています。以下に、主なものをまとめます（カッコの中はそれぞれのデフォルト値を表します）。
（1）showOnパラメーター（focus）／buttonTextパラメーター（'...'）
DatePickerウィジェットは、デフォルトで、テキストボックスにフォーカスを移動したタイミングでカレンダーをポップアップします。しかし、showOnパラメーターを利用することで、テキストボックスの脇にボタンが追加され、ボタンのクリックでカレンダーを表示できるようになります。以下は、showOnパラメーターの設定値です。
| テキストボックスにフォーカスを移したとき |
| ボタンをクリックしたとき |
| フォーカス／ボタン・クリックの双方 |
例えば以下は「showOn: 'both'」とした場合の実行結果です。
ボタン・キャプションは、buttonTextパラメーターで変更することもできます。
（2）buttonImageパラメーター（－）／buttonImageOnlyパラメーター（false）
buttonImageパラメーターを指定することで、標準のボタンではなく、アイコン画像をボタンにできます（次の画面はその例）。「buttonImage: 'date.png'」のように指定します。
画像だけを表示して、ボタンの枠を取り除きたい場合には、buttonImageOnlyパラメーターをtrueに設定します。
（3）minDate／maxDateパラメーター（－）
選択できる最小／最大の日付を指定します。「minDate: -10」のように整数値で指定することもできますし、「maxDate: '+3M +15D'」のように文字列で指定することもできます。それぞれ、現在の日付を基点に、10日前、3カ月と15日後を意味します。以下の画面は、この指定を行った場合の例です。
範囲外の日付は選択できなくなる（今日が2013/07/06の場合）
（4）そのほか、表示に関わるパラメーター
そのほかにも、以下のようなパラメーターでカレンダーの表示をカスタマイズできます。
| 表示年を変更するための選択ボックスを表示するか | false |
| 表示月を変更するための選択ボックスを表示するか | false |
| 前後の月に属する日も表示するか | false |
| ［今日］［閉じる］ボタンを表示するか | false |
| カレンダー表示時に使用するエフェクト | show |
| 一度に表示する月の数 | 1 |
▼
※以下では、本稿の前後を合わせて5回分（第1回～第5回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載INDEX］を参照してください。
2. 【現在、表示中】≫ DatePickerウィジェットで日付選択ボックスを作成するには？
日付選択ボックスを実装するためのjQuery UIウィジェット「DatePicker」の基本的な使い方を説明。オプションにより、挙動や見栄えをさまざまにカスタマイズできる。
3. Tabsウィジェットでタブ・パネルを作成するには？
パネルの端に配置されたタブで内容を切り替えられるタブ・パネルを簡単に実装できる、jQuery UIのTabsウィジェットの基本的な使い方を説明する。