ExtJS2.0中使用开始和结束时间的控件 示例

ExtJS2.0中使用开始和结束时间的控件 示例

效果:

 

源代码:

 Ext.namespace("Com.Commons.DateCheck");
     Ext.apply(Ext.form.VTypes, {
        daterange: function(val, field) {
            var date = field.parseDate(val);
           
            // We need to force the picker to update values to recaluate the disabled dates display
            var dispUpd = function(picker) {
                var ad = picker.activeDate;
                picker.activeDate = null;
                picker.update(ad);
            };
           
            if (field.startDateField) {
                var sd = Ext.getCmp(field.startDateField);
                sd.maxValue = date;
                if (sd.menu && sd.menu.picker) {
                    sd.menu.picker.maxDate = date;
                    dispUpd(sd.menu.picker);
                }
            } else if (field.endDateField) {
                var ed = Ext.getCmp(field.endDateField);
                ed.minValue = date;
                if (ed.menu && ed.menu.picker) {
                    ed.menu.picker.minDate = date;
                    dispUpd(ed.menu.picker);
                }
            }
            /* Always return true since we're only using this vtype
            * to set the min/max allowed values (these are tested
            * for after the vtype test)
            */
            return true;
        }
    });
 Com.Commons.DateCheck.startEndToToday = Ext.extend(Ext.Panel, {
   initComponent : function() {
        Ext.apply(this, {
         layout:'table'
        ,width:900
        ,layoutConfig: {
            columns: 4
              }
        ,items:[
         {xtype:'label',text :'开始时间:'},
         {
                       xtype:'datefield',
                        width:110,
                       fieldLabel:'Start Date/Time',
                       id:'datetime_start',
                       name:'datetime_start',
                       allowBlank:true,
                       maxValue:new Date(),
                       emptyText:'YYYY-MM-DD',
                       vtype:'daterange',
                       endDateField:'datetime_end' // id of the end date field
                   },
         {xtype:'label',text :'结束时间:'},
         {
                       xtype:'datefield',
                        width:110,
                       fieldLabel:'End Date/Time',
                       id:'datetime_end',
                       name:'datetime_end',
                       allowBlank:true,
                       maxValue:new Date(),
                       emptyText:'YYYY-MM-DD',
                       vtype:'daterange',
                       startDateField:'datetime_start' // id of the start date field
                   }]
        });
       Com.Commons.DateCheck.startEndToToday.superclass.initComponent.call(this);
   }
 });
Ext.reg("startEndDate-panel", Com.Commons.DateCheck.startEndToToday);