読者です 読者をやめる 読者になる 読者になる

matsukaz's blog

Agile, node.js, ruby, AWS, cocos2d-xなどなどいろいろやってます

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

jQuery

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

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

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

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

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

お手軽っ。
ちなみにdatePickerは複数のCSSと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の方がお勧めです。