Ext.form.DateField简单用法及日期范围控制

项目中有时需要用到起始日期和结束日期，要做到起始日期必须小于结束日期。在extjs中已经有现成的函数，摘录如下：

 

 

Ext.apply(Ext.form.VTypes, { daterange : function(val, field) { var date = field.parseDate(val); if (!date) { return; } if (field.startDateField && (!this.dateRangeMax || (date.getTime() != this.dateRangeMax .getTime()))) { var start = Ext.getCmp(field.startDateField); start.setMaxValue(date); start.validate(); this.dateRangeMax = date; } else if (field.endDateField && (!this.dateRangeMin || (date.getTime() != this.dateRangeMin .getTime()))) { var end = Ext.getCmp(field.endDateField); end.setMinValue(date); end.validate(); this.dateRangeMin = date; } /* * 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; } });

 

然后分别定义起始日期和结束日期控件：

 

var startDate = new Ext.form.DateField({ fieldLabel : '开始日期', emptyText : '请选择', disabledDays : [1, 2, 5],//将星期一,二,五禁止.数值为0-6,0为星期日,6为星期六 labelWidth : 100, readOnly : true, allowBlank : false, format : 'Y-m-d',//日期格式 name : 'startdt', id : 'startdt', vtype : 'daterange',//daterange类型为上代码定义的类型 endDateField : 'endDate'//必须跟endDate的id名相同 }) var endDate = new Ext.form.DateField({ fieldLabel : '结束日期', emptyText : '请选择', disabledDays : [1, 2, 5],//将星期一,二,五禁止.数值为0-6,0为星期日,6为星期六 readOnly : true, allowBlank : false, format : 'Y-m-d',//日期格式 name : 'enddt', id : 'endDate', vtype : 'daterange',//daterange类型为上代码定义的类型 startDateField : 'startdt'//必须跟startDate的id名相同 })

 

效果如下两图：

 

 

                               图1.选择开始日期

 

 

 

                                  图2.选择结束日期