jQuery を使って動的で高品質なウェブサイトを構築する方法を解説しています。なるべく動くサンプルコードを記載しています。
jQuery 入門jQuery 入門
jQuery の使い方
jQuery の基礎
jQuery モバイル
jQuery UI
サンプルのテーマ変更

jQuery の拡張
関連サイト
サイト情報
ホーム > jQuery UI の利用 > jQuery UI - デートピッカー

jQuery UI - デートピッカー

スポンサーリンク

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

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

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

基本的な利用方法

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

日付:

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

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

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

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

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

イベントの取得

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

Date:

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

$('#dpdemo2').datepicker({
  onSelect: function(dateText, inst){
    alert(dateText);
  }
});
スポンサーリンク
ホーム > jQuery UI の利用 > jQuery UI - デートピッカー
小山圭介 著者
小山 圭介
4/15/1973生
米国在住のソフトウェアエンジニア。ITコンサルタント.. »プロフィール
スポンサーリンク

© 2011-2013 Keisuke Oyama jQuery 入門