JavaScript

ExtJSで日付カレンダー機能を使う

お問い合わせフォームなどで、商品の発送日やサービス開始日など日付を入力する機会は多いです。

その際、20110501 のように数字の 8 桁や 2011-05-01 のようにハイフン区切りで日付を入力する場面があります。

しかし、これでは一般ユーザーにはわかりにくい場合があり、ユーザビリティを考慮したインタフェース設計が求められます。

そこでよく使われるのがカレンダー機能。

これを使うと、カレンダーから目的の日付を設定できるので年配の人でも子供でも入力間違いが減ります。

ExtJSのライブラリを利用する

jQuery もいいですが、ExtJS にはカレンダー機能が標準で用意されているので今回はこれを使ってみます。

まずは、html 側にカレンダーオブジェクトを表示する div タグを作成します。

そして、この div タグにカレンダーオブジェクトをレンダリングさせるための処理を JavaScript で定義します。

今回は、入力不可でフォーマットが YYYY-MM-DD の日付項目を作成します。

あとは、form タグで囲って POST すれば date という POST パラメータで日付文字列が送信されます。