日付入力コントロールを利用する

以前紹介したdatePickerの新しいバージョン（v2）が出ているのでもう一度ご紹介。

datePicker pluginを利用することで、上記のように日付入力コントロールを利用することができます。
こんなHTMLを用意して

<form>
日付：<input name="date1" class="date-pick" />
</form>

Javascriptをこんな風に定義します。

$(document).ready(function(){
  $(".date-pick").datePicker();
});

お手軽っ。
ちなみにdatePickerは複数のCSSとJSファイルで構成されています。利用するライブラリは以下の通りです。

• jquery-1.2.1.js

[--これがなくては。datePicker V2を利用する場合は、jQuery 1.2以降を利用します。

• jquery.datePicker.js
  • datePicker本体。
• jquery.bgiframe.js
  • SELECT要素があった場合に日付入力コントロールを正しく表示できない問題に対する対応。
• date.js
  • Dateオブジェクトを拡張するためのライブラリ。曜日などを日本語化する際に手を加えます。
• datePicker.css
  • datePickerの見た目を定義したCSS。
• demo.css
  • datePickerのデモページで利用されているCSS。datePickerを利用するためにはCSSをいくつか定義する必要があるため、このファイルを元に編集していくと楽。

jQuery UIにも日付入力コントロールが用意されているけど、操作性や多言語対応などでdatePickerの方がお勧めです。