2个Ext.form.DateField 取值范围控制

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

view plaincopy to clipboardprint?
Ext.apply(Ext.form.VTypes, {  
            daterange : function(val, field) {  
                var date = field.parseDate(val);  
                if (!date) {  
                    return;  
                }  
                if (field.startDateField  
                        && (!this.dateRangeMax || (date.getTime() != this.dateRangeMax  
                                .getTime()))) {  
                    var start = Ext.getCmp(field.startDateField);  
                    start.setMaxValue(date);  
                    start.validate();  
                    this.dateRangeMax = date;  
                } else if (field.endDateField  
                        && (!this.dateRangeMin || (date.getTime() != this.dateRangeMin  
                                .getTime()))) {  
                    var end = Ext.getCmp(field.endDateField);  
                    end.setMinValue(date);  
                    end.validate();  
                    this.dateRangeMin = date;  
                }  
                /* 
                 * Always return true since we're only using this vtype to set 
                 * the min/max allowed values (these are tested for after the 
                 * vtype test) 
                 */ 
                return true;  
            }  
        }); 
Ext.apply(Ext.form.VTypes, {
   daterange : function(val, field) {
    var date = field.parseDate(val);
    if (!date) {
     return;
    }
    if (field.startDateField
      && (!this.dateRangeMax || (date.getTime() != this.dateRangeMax
        .getTime()))) {
     var start = Ext.getCmp(field.startDateField);
     start.setMaxValue(date);
     start.validate();
     this.dateRangeMax = date;
    } else if (field.endDateField
      && (!this.dateRangeMin || (date.getTime() != this.dateRangeMin
        .getTime()))) {
     var end = Ext.getCmp(field.endDateField);
     end.setMinValue(date);
     end.validate();
     this.dateRangeMin = date;
    }
    /*
     * Always return true since we're only using this vtype to set
     * the min/max allowed values (these are tested for after the
     * vtype test)
     */
    return true;
   }
  });

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

view plaincopy to clipboardprint?
var startDate = new Ext.form.DateField({  
                fieldLabel : '开始日期',  
                emptyText : '请选择',  
                disabledDays : [1, 2, 5],//将星期一,二,五禁止.数值为0-6,0为星期日,6为星期六  
                labelWidth : 100,  
                readOnly : true,  
                allowBlank : false,  
                format : 'Y-m-d',//日期格式  
                name : 'startdt',  
                id : 'startdt',  
                vtype : 'daterange',//daterange类型为上代码定义的类型  
                endDateField : 'endDate'//必须跟endDate的id名相同  
            })  
    var endDate = new Ext.form.DateField({  
                fieldLabel : '结束日期',  
                emptyText : '请选择',  
                disabledDays : [1, 2, 5],//将星期一,二,五禁止.数值为0-6,0为星期日,6为星期六  
                readOnly : true,  
                allowBlank : false,  
                format : 'Y-m-d',//日期格式  
                name : 'enddt',  
                id : 'endDate',  
                vtype : 'daterange',//daterange类型为上代码定义的类型  
                startDateField : 'startdt'//必须跟startDate的id名相同  
            }) 
var startDate = new Ext.form.DateField({
    fieldLabel : '开始日期',
    emptyText : '请选择',
    disabledDays : [1, 2, 5],//将星期一,二,五禁止.数值为0-6,0为星期日,6为星期六
    labelWidth : 100,
    readOnly : true,
    allowBlank : false,
    format : 'Y-m-d',//日期格式
    name : 'startdt',
    id : 'startdt',
    vtype : 'daterange',//daterange类型为上代码定义的类型
    endDateField : 'endDate'//必须跟endDate的id名相同
   })
 var endDate = new Ext.form.DateField({
    fieldLabel : '结束日期',
    emptyText : '请选择',
    disabledDays : [1, 2, 5],//将星期一,二,五禁止.数值为0-6,0为星期日,6为星期六
    readOnly : true,
    allowBlank : false,
    format : 'Y-m-d',//日期格式
    name : 'enddt',
    id : 'endDate',
    vtype : 'daterange',//daterange类型为上代码定义的类型
    startDateField : 'startdt'//必须跟startDate的id名相同
   })

效果如下两图：

 

                               图1.选择开始日期

 

                                  图2.选择结束日期

 

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/security08/archive/2009/12/24/5070749.aspx