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