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);
