馬とテニスのIT革命
馬とテニスとリラックマが好きな IT 系のエンジニアです。
JavaScript

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

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

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

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

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

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

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

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

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

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

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

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

<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 パラメータで日付文字列が送信されます。

Web API The Good Parts

オライリーの「Web API」に特化した本です。最近の多くの Web サービスは API が活用されていますが、その技術はこれまでの Web サイトとそれほど大きく変わりません。

今後、マイクロサービス化が進む中で知っておいて損はない内容が詰め込まれており、現場のエンジニアやこれから Web 系のエンジニアを目指す人にもオススメの一冊です。

created by Rinker
¥2,376
(2018/10/20 14:06:04時点 Amazon調べ-詳細)