extjs时间范围选择自动判断的实现代码

extjs中有时需要选择一个日期范围，需要自动判断，选择的开始日期不能大于结束日期，或结束日期不能小于开始日期，实现的代码如下

效果图：

从上图可以看到，当选择了一个开始时间后，会自动限制结束时间的选择范围，实现两个日期选择器的联动。

代码如下：

首先定义联动处理函数：

延伸文件系统应用(ext。形式。字段。vtypes，{ daterage :函数(val，field){ var date=field。parse date(val)；if(！date){ return false；} if (field.startDateField(！这个。DateRangeMax | |(日期。GetTime()！=这个。DateRangeMax。GetTime()))){ var start=field。向上('网格').向下(' # '字段。startdatefield)；start.setMaxValue(日期);开始吧。validate()；this.dateRangeMax=日期；} else if (field.endDateField(！这个。DateRangMin | |(日期。GetTime()！=这个。DateRangeMin。GetTime()))){ var end=field。向上('网格').向下(' # '字段。enddatefield)；end.setMinValue(日期);结束。validate()；this.dateRangeMin=日期；}返回true}，日期范围文本： '开始日期必须小于结束日期' });延伸文件系统小费。快速小费经理。init()；在tbar，bbar或形式中的项目中增加：

{ xtype: 'datefield '，fieldLabel: '时间范围开始，名称为： 'startdt '，id: 'startdt '，vtype: 'daterange '，endDateField: 'enddt '，format: 'Y-m-d '，width: 220，labelWidth: 90，msgTarget: ' side '，autoFitErrors: false }，{ xtype: 'datefield '，fieldLabel: '结束，名称为： 'enddt '，id: 'enddt '，vtype: 'daterange '，startDateField: 'startdt '，format: 'Y-m-d '，width: 170，labelWidth: 40，msgTarget: ' side '，autoFitErrors: false }，{ xtype: 'button '，text: '查询，iconCls: ' fljs '，处理程序：函数(){ 0.即可实现以上效果本代码复制在extjs4.1.1中运行