jQuery UI - デートピッカー

日付を入力する時には、カレンダーをみながら入力したい場合が多いものですよね。

最近のアプリケーションでは日付の入力項目では、キーボードからの入力を許可すると同時にカレンダーが表示される場合も少なくありません。

jQuery UI のデートピッカーウィジェットを使うと、簡単にカレンダーを利用できます。

基本的な利用方法

次のテキストボックスを日付の入力項目とします。

このテキストボックスに日付を入力するために、テキストボックスにフォーカスがきたときに、カレンダーを表示しています。 カレンダーから日付を選択すると、カレンダーが閉じて選択した値がテキストボックスに入ります。

ちなみに、このカレンダーは Ctrl + 矢印キーなどでキーボードからも操作可能です。

このようなカレンダーの表示をどのようにしたら実現できるでしょうか。実はこの動作はデフォルトの操作そのままなので、ほんの一行でできてしまいます。

$('#dpdemo1').datepicker();

この ID は input 要素に設定した ID です。input 要素を表すオブジェクトで datepicker() を呼び出せば OK です。

イベントの取得

日付が変更されたタイミングでイベントを受け取り、何かをしたい場合はどうしたらよいでしょうか。例えば次の例では日付を選択した時に日付をポップアップで表示しています。

日付を選択した時に呼び出される関数を設定するには、 datepicker の呼び出し時に次のように onselect オプションに関数オブジェクトを設定します。

$('#dpdemo2').datepicker({
  onSelect: function(dateText, inst){
    alert(dateText);
  }
});