jQuery EasyUI の日付入力(datebox)を使う

jQuery EasyUI のdateboxを使うサンプル。これを使うと日付入力が簡単にできる。
xtesteasyui.html

• dateboxの表示

<!-- HTML -->
<input id="dateboxA" type="text" class="easyui-datebox" required="required"></input>

あらかじめHTMLのinput要素として用意しておく。クラス名は”easyui-datebox”で、上記の例ではrequiredを指定することで、入力を必須にしている。またidを指定して、jQueryではこの名前でアクセスする。

• 値の取得/設定

// JavaScript
alert( $('#dateboxA').datebox('getValue') ); // 値の取得
$('#dateboxA').datebox('setValue', '2013/03/31'); // 値の設定

値の取得にはメソッド’getValue’を、設定には’setValue’を使う。

• フォーマットの設定

標準で取得した値(日付)は、”m/d/yyyy”となっている。これを独自の形式にするには、初期化する際にオプション’formatter’を設定することで対応する。例えば”yyyy/mm/dd”形式(並び順を年-月-日、月と日をゼロパディングして2桁にする)には以下のようにする。

// JavaScript
$('#dateboxA').datebox({
    formatter: function(d){
        var yy = d.getYear();
        var mm = d.getMonth() + 1;
        var dd = d.getDate();
        if (yy < 2000) { yy += 1900; }
        if (mm < 10) { mm = '0' + mm; }
        if (dd < 10) { dd = '0' + dd; }
        return (yy + '/' + mm + '/' + dd);
    }
});

• イベント

日付選択時には、onSelectイベントが発生する。

// JavaScript
$('#dateboxA').datebox({
    onSelect: function(date){
       // ...
    }
});