Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
jQuery UI逆引きリファレンス

jQuery UI逆引きリファレンス

DatePickerウィジェットで日付選択ボックスを作成するには?

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パラメーターの設定値です。

設定値カレンダーを表示するタイミング
focus テキストボックスにフォーカスを移したとき
button ボタンをクリックしたとき
both フォーカス/ボタン・クリックの双方
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の場合)
範囲外の日付は選択できなくなる(今日が2013/07/06の場合)
範囲外の日付は選択できなくなる(今日が2013/07/06の場合)

(4)そのほか、表示に関わるパラメーター

 そのほかにも、以下のようなパラメーターでカレンダーの表示をカスタマイズできます。

パラメーター概要デフォルト値
changeYear 表示年を変更するための選択ボックスを表示するか false
changeMonth 表示月を変更するための選択ボックスを表示するか false
showOtherMonths 前後の月に属する日も表示するか false
showButtonPanel [今日][閉じる]ボタンを表示するか false
showAnim カレンダー表示時に使用するエフェクト show
numberOfMonths 一度に表示する月の数 1
表示に関わる主なパラメーター
表示に関わる主なパラメーター
表示に関わる主なパラメーター

※以下では、本稿の前後を合わせて5回分(第1回~第5回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

jQuery UI逆引きリファレンス
1. jQuery UIを利用するには?

jQuery UIの基本機能を目的別リファレンスの形式でまとめる連載スタート。jQuery UIで提供されているコンポーネントと、基本的な利用法を説明する。

jQuery UI逆引きリファレンス
2. 【現在、表示中】≫ DatePickerウィジェットで日付選択ボックスを作成するには?

日付選択ボックスを実装するためのjQuery UIウィジェット「DatePicker」の基本的な使い方を説明。オプションにより、挙動や見栄えをさまざまにカスタマイズできる。

jQuery UI逆引きリファレンス
3. Tabsウィジェットでタブ・パネルを作成するには?

パネルの端に配置されたタブで内容を切り替えられるタブ・パネルを簡単に実装できる、jQuery UIのTabsウィジェットの基本的な使い方を説明する。

jQuery UI逆引きリファレンス
4. タブ・パネルの挙動をカスタマイズするには?

Tabsウィジェットのイベントやメソッドを利用しながら、タブ・パネルのさまざまな制御方法を紹介する。

jQuery UI逆引きリファレンス
5. Sortableウィジェットで並べ替え可能なリストを生成するには?

指定された要素配下の子要素群をドラッグ操作で並べ替え可能にするSortableウィジェットの基本的な使い方を説明する。

サイトからのお知らせ

Twitterでつぶやこう!