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

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

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

お問い合わせフォームなどで、商品の発送日やサービス開始日など、日付を入力する機会は多いです。その際、20110501 のように数字の 8 桁や 2011-05-01 のようにハイフン区切りで日付を入力する場面があります。

しかし、これでは一般ユーザーにはわかりにくい場合があり、ユーザビリティを考慮したインタフェース設計が求められます。そこでよく使われるのがカレンダー機能。これを使うと、カレンダーから目的の日付を設定できるので年配の人でも子供でも入力間違いが減ります。

ExtJS にはカレンダー機能が標準で用意されているのでそれを使ってみます。まずは、html 側にカレンダーオブジェクトを表示する div タグを作成します。

<div id="sample_date"></div>

そして、この div タグにカレンダーオブジェクトをレンダリングさせるための処理を JavaScript で定義します。今回は、入力不可でフォーマットが YYYY-MM-DD の日付項目を作成します。

実際のサンプルは 日付カレンダー機能(FormPanel - datefield) のサイトで確認できます。

<script type="text/javascript">
<!-- 

Ext.onReady(function() {

  Ext.create('Ext.FormPanel', {
    renderTo: 'sample_date',
    bodyStyle: 'border-style: none;',
    items: [{
        xtype: 'datefield',
        name: 'date',
        format: 'Y-m-d',
        value: '2011-05-01',
        editable: false
    }]
  });

});

//-->
</script>

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

最終更新日:

関連記事

人気記事

新着情報