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

ExtJS日期范围验证

最新推荐文章于 2017-03-21 17:15:41 发布

原创最新推荐文章于 2017-03-21 17:15:41 发布 · 1.7w 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#date #extjs #function

ExtJs 专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何使用ExtJS实现起始日期与结束日期的有效验证，确保前者始终小于后者，并展示了具体的代码实现及设置示例。

项目中有时需要用到起始日期和结束日期，要做到起始日期必须小于结束日期。在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名相同 })

效果如下两图：