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

从上图可以看到,当选择了一个开始时间后,会自动限制结束时间的选择范围,实现两个日期选择器的联动.
代码如下:
首先定义联动处理函数:

1. Ext.apply(Ext.form.field.VTypes, {
   
2. daterange: function (val, field) {
   
3. var date = field.parseDate(val);
   
4. 
   
5. if (!date) {
   
6. return false;
   
7. }
   
8. if (field.startDateField && (!this.dateRangeMax || (date.getTime() != this.dateRangeMax.getTime()))) {
   
9. var start = field.up('grid').down('#' + field.startDateField);
   
10. start.setMaxValue(date);
    
11. start.validate();
    
12. this.dateRangeMax = date;
    
13. }
    
14. else if (field.endDateField && (!this.dateRangeMin || (date.getTime() != this.dateRangeMin.getTime()))) {
    
15. var end = field.up('grid').down('#' + field.endDateField);
    
16. end.setMinValue(date);
    
17. end.validate();
    
18. this.dateRangeMin = date;
    
19. }
    
20. return true;
    
21. },
    
22. daterangeText: '开始日期必须小于结束日期'
    
23. });
    
24. Ext.tip.QuickTipManager.init();

复制代码

在tbar,bbar或form中的items中增加:

1. {
   
2. xtype: 'datefield',
   
3. fieldLabel: '时间范围 开始',
   
4. name: 'startdt',
   
5. id: 'startdt',
   
6. vtype: 'daterange',
   
7. endDateField: 'enddt',
   
8. format: 'Y-m-d',
   
9. width: 220,
   
10. labelWidth: 90,
    
11. msgTarget: 'side',
    
12. autoFitErrors: false
    
13. }, {
    
14. xtype: 'datefield',
    
15. fieldLabel: '结束',
    
16. name: 'enddt',
    
17. id: 'enddt',
    
18. vtype: 'daterange',
    
19. startDateField: 'startdt',
    
20. format: 'Y-m-d',
    
21. width: 170,
    
22. labelWidth: 40,
    
23. msgTarget: 'side',
    
24. autoFitErrors: false
    
25. }, { xtype: 'button',
    
26. text: '查询',
    
27. iconCls: 'fljs',
    
28. handler: function () { ...

复制代码

即可实现以上效果 本代码复制在extjs4.1.1中运行

来源：互联网
免责声明：如果侵犯了您的权益，请联系站长（1277306191@qq.com），我们会及时删除侵权内容，谢谢合作！