您的位置: 首页  >  文章  >  Ext.form.DateField简单用法及日期范围控制

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

分类: 文章 • 2025-03-23 20:56:33

 

学习还可以参考：

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

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

 

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

 

 

 

[javascript] view plaincopy
  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 plaincopy
  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.             })  

 

 

效果如下两图：

 

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

 

                               图1.选择开始日期

 

 

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

 

                                  图2.选择结束日期

相关推荐