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

 

学习还可以参考：

http://blog.csdn.net/lulu_jiang/article/details/5473277

本文转自：http://blog.csdn.net/security08/article/details/5070749

 

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

 

 

 

[javascript]  view plain copy

1. Ext.apply(Ext.form.VTypes, {  
2.             daterange : function(val, field) {  
3.                 var date = field.parseDate(val);  
4.                 if (!date) {  
5.                     return;  
6.                 }  
7.                 if (field.startDateField  
8.                         && (!this.dateRangeMax || (date.getTime() != this.dateRangeMax  
9.                                 .getTime()))) {  
10.                     var start = Ext.getCmp(field.startDateField);  
11.                     start.setMaxValue(date);  
12.                     start.validate();  
13.                     this.dateRangeMax = date;  
14.                 } else if (field.endDateField  
15.                         && (!this.dateRangeMin || (date.getTime() != this.dateRangeMin  
16.                                 .getTime()))) {  
17.                     var end = Ext.getCmp(field.endDateField);  
18.                     end.setMinValue(date);  
19.                     end.validate();  
20.                     this.dateRangeMin = date;  
21.                 }  
22.                 /* 
23.                  * Always return true since we're only using this vtype to set 
24.                  * the min/max allowed values (these are tested for after the 
25.                  * vtype test) 
26.                  */  
27.                 return true;  
28.             }  
29.         });  

 

 

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

 

 

[javascript]  view plain copy

1. var startDate = new Ext.form.DateField({  
2.                 fieldLabel : '开始日期',  
3.                 emptyText : '请选择',  
4.                 disabledDays : [1, 2, 5],//将星期一,二,五禁止.数值为0-6,0为星期日,6为星期六  
5.                 labelWidth : 100,  
6.                 readOnly : true,  
7.                 allowBlank : false,  
8.                 format : 'Y-m-d',//日期格式  
9.                 name : 'startdt',  
10.                 id : 'startdt',  
11.                 vtype : 'daterange',//daterange类型为上代码定义的类型  
12.                 endDateField : 'endDate'//必须跟endDate的id名相同  
13.             })  
14.     var endDate = new Ext.form.DateField({  
15.                 fieldLabel : '结束日期',  
16.                 emptyText : '请选择',  
17.                 disabledDays : [1, 2, 5],//将星期一,二,五禁止.数值为0-6,0为星期日,6为星期六  
18.                 readOnly : true,  
19.                 allowBlank : false,  
20.                 format : 'Y-m-d',//日期格式  
21.                 name : 'enddt',  
22.                 id : 'endDate',  
23.                 vtype : 'daterange',//daterange类型为上代码定义的类型  
24.                 startDateField : 'startdt'//必须跟startDate的id名相同  
25.             })  

 

 

效果如下两图：

 

 

                               图1.选择开始日期

 

 

 

                                  图2.选择结束日期