ASP.NET MVC 4 WebApi 與 Extjs 的結合 -- 日期欄位

一般使用日期選擇器 ( date picker ) 如果不支援 HTML5 就可能會考慮使用 Datepicker | jQuery UI 來設定，如果支援 HTML5 的話就只需要在 HTML 內設定就好了：

<input type="date" name="bday">

但 HTML 5 的瀏覽器應該在最新版都有支援，如果用戶端有較舊的瀏覽器版本，那就不太適用了。

Extjs 提供很完整的日期選擇器，可以設定最早與最晚日期、選擇今天日期、封鎖日期以及日期輸出格式等功能，光這些項目其實就可以符合在大部分情況。

這裡就說明參數選項如何使用

最早日期

minDate: new Date()
minText: '不能選擇比 ' + Ext.Date.format(new Date(), 'Y-m-d') + ' 更早的日期'

最晚日期

maxDate: new Date('01/01/2015')
maxText: '不能選擇比 ' + '2015/01/01 ' + '更晚的日期'

今天顯示字樣

// 今天顯示字樣
todayText: '今天'

封鎖日期

// 封鎖的日期 d/m/Y
disabledDates: ['02/20/2014', '03/21/2014', '04/22/2014', '05/23/2014'], 
// 封鎖的日期的提示
disabledDatesText: '不能選此日期',

按下日期輸出格式

handler: function (picker, date) {
    alert(
        '原本:'+date+
        '\nExt.Date.format(date, Y-m-d)後:' + Ext.Date.format(date, 'Y-m-d')
    )
}

更可以方便選擇年與月

完整程式碼為：

// 載入會用到的程式
Ext.require([
    'Ext.Date.*',
    'Ext.panel.*',
    
]);

Ext.onReady(function () {

    // 建立 form 框架
    Ext.create('Ext.panel.Panel', {
        title: 'Choose a future date:',
        width: 400,
        bodyPadding: 10,
        renderTo: Ext.getBody(),
        items: [{
            // 指定型態為datepicker
            xtype: 'datepicker',
            // 最早的日期 : 今天
            minDate: new Date(),
            minText: '不能選擇比 ' + Ext.Date.format(new Date(), 'Y-m-d') + ' 更早的日期',
            // 最晚的日期 : 01/01/2015
            maxDate: new Date('01/01/2015'),
            maxText: '不能選擇比 ' + '2015/01/01 ' + '更晚的日期',
            // format 日期格式
            // format: 'Y/m/d', 
            // 今天顯示字樣
            todayText: '今天',
            // 封鎖的日期 d/m/Y
            disabledDates: ['02/20/2014', '03/21/2014', '04/22/2014', '05/23/2014'], 
            // 封鎖的日期的提示
            disabledDatesText: '不能選此日期',
            // date 選到的日期
            handler: function (picker, date) {

                alert(
                     '原本:'+date+
                    '\nExt.Date.format(date, Y-m-d)後:' + Ext.Date.format(date, 'Y-m-d')
                    )
            }
        }]
    });


});