日期事件選擇器

<div id="timeForm" class="w_320">
    <h2>時間選擇器</h2>
</div>
<div id="dateForm" class="w_320">
    <h2>日期選擇器</h2>
</div>

Ext.onReady(function(){
    //Ext表單
    
    //Ext.form.Basic 基本表單組件二(拾取器字段Picker)
    //開發中使用表單面板組件Ext.form.Panel,它本質是一個標準的(面板)Ext.panel.Panel,它內置並自動建立了Ext.form.Basic基本表單組件
    //與原始表單主要3點不一樣(1.提交方式 2.表單驗證 3.表單組件)
    //1.提交方式(同步---異步)
    //2.表單驗證(須要手動驗證----配置便可使用)
    //3.表單組件(基本的組件------擴展的功能強大的組件)
    
    //Picker抽象類,具備惟一的觸發按鈕用於在字段下方動態彈出面板
    //拾取器組件如：(1.ComboBox,2.Date,3.Time)
    
    //初始化信息提示功能
    Ext.QuickTips.init();
    
    //2、時間選擇器Ext.form.field.Time
    Ext.create('Ext.form.Panel',{
        title : '時間選擇器Ext.form.field.Time',
        width : 300,
        height : 100,
        renderTo :　'timeForm',
        frame : true,
        bodyStyle : 'padding:5px',
        
        items : [{
            id : 'timeId',
            name : 'timeName',
            width : 260,
            fieldLabel : '選擇時間',
            xtype : 'timefield',
            labelSeparator : ': ',
            msgTarget : 'side',
            autoFitErrors : false,//展現錯誤信息時是否自動調整寬度
            maxValue : '18:00',//最大時間
            maxText : '時間應小於{0}',//大於時間提示
            minValue : '08:00',
            minText : '時間應大於{0}',
            pickerMaxHeight : 70,//下拉列表最大高度
            increment : 60,//時間間隔爲60分鐘
            format : 'H時i分s秒',//G表示24時計時法
            invalidText : '時間格式無效',
            value : new Date() //默認當前時間
        }]
    });
    
    //3、日期選擇器Ext.form.field.Date
    Ext.create('Ext.form.Panel',{
        title : '日期選擇器Ext.form.field.Date',
        width : 300,
        height : 100,
        renderTo : 'dateForm',
        frame : true,
        bodyStyle : 'padding:5px',
        items : [{
            id : 'dateFormId',
            name : 'dateFormName',
            fieldLabel : '選擇日期',
            xtype : 'datefield',
            width : 260,
            labelSeparator : ': ',
            msgTarget : 'side',
            autoFitErrors : false,
            format : 'Y年m月d日',//日期格式
            maxValue : '12/31/2016',
            minValue : '01/01/2016',
            disabledDates : ['2016年01月14日'],//禁止選擇日期(與format格式相同)
            disabledDatesText : '禁止選擇日期',
            disabledDays : [0,6],//禁止選擇星期日和星期六
            disabledDaysText : '禁止選擇日期',
            value : '01/18/2016'//默認日期(今天:new Date())
        }]
    });
});