时间选择器
     
          
      
日期选择器
     
    

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();        //二、时间选择器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() //默认当前时间        }]    });        //三、日期选择器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())        }]    });});