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

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

 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          });

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

 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.选择结束日期

原文出自：

http://blog.csdn.net/security08/article/details/5070749