2个Ext.form.DateField 取值范围控制-CSDN博客

项目中有时需要用到起始日期和结束日期，要做到起始日期必须小于结束日期。在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名相同
   })