Extjs 日期字段从到或开始结束日期验证答案

【问题标题】：Extjs datefields from to or start end date validationsExtjs 日期字段从到或开始结束日期验证
【发布时间】：2013-11-13 16:41:16
【问题描述】：

这是一个 extjs mixin，用于验证表单中的 fromdate todate 或开始结束日期。这是mixin..（核心代码取自sencha论坛:)）

Ext.define("AMShiva.mixin.DateRangeValidator", {
    timerange: function (val, field) {
        /// <summary>
        /// This will validate two datefields
        /// </summary>

        var me = this; //will be the form, containing datefields

        var time = field.parseDate(val);
        if (!time) {
            return;
        }
        if (field.startTimeField && (!this.timeRangeMax || (time.getTime() != this.timeRangeMax.getTime()))) {
            var start = me.down('datefield[name=' + field.startTimeField + ']');
            start.maxValue = time;
            start.validate();
            this.timeRangeMax = time;
        }
        else if (field.endTimeField && (!this.timeRangeMin || (time.getTime() != this.timeRangeMin.getTime()))) {
            var end = me.down('datefield[name=' + field.endTimeField + ']');
            end.minValue = time;
            end.validate();
            this.timeRangeMin = time;
        }
        return true;
    }
});

上述mixin的示例用法

这是表单的一部分。

    {
        xtype: 'datefield',
        fieldLabel: 'From',
        name: 'from_date',
        format: 'Y-m-d',
        editable: false,

        endTimePeriod:'to_date', //below component
        validationEvent: 'change',
        validator: function (value) {
            return me.timerange(value, this);
        }
    },
    {
        xtype: 'datefield',
        fieldLabel: 'To',
        format: 'Y-m-d',
        name: 'to_date',
        editable: false,

        startTimeField:'from_date', //above component
        validationEvent: 'change',
        validator: function (value) {
            return me.timerange(value, this);
        }
    }

【问题讨论】：

很好地添加了所有示例代码，但我错过了一个明确的问题，用问号表示。
有关更通用和可扩展的解决方案，您可以查看此问题 - stackoverflow.com/a/34159877/2667065

标签： validation date extjs date-range datefield

【解决方案1】：

用于日期范围验证的自定义 Vtype 日期范围：

Ext.apply(Ext.form.VTypes, {
    daterange : function (val, field) {
        var date = field.parseDate(val);
        if (!date) {
            return false;
        }
        if (field.startDate && (!this.dateRangeMax || (date.getTime() != this.dateRangeMax.getTime()))) {
            var start = Ext.getCmp(field.startDate); //field.up('form').down('#'+field.startDate);
            start.setMaxValue(date);
            start.validate();
            this.dateRangeMax = date;

        } else if (field.endDate && (!this.dateRangeMin || (date.getTime() != this.dateRangeMin.getTime()))) {
            var end = Ext.getCmp(field.endDate); //field.up('form').down('#' + field.endDate);
            end.setMinValue(date);
            end.validate();
            this.dateRangeMin = date;
        }
        return true;
    },
    daterangeText : Ext.BUNDLE.getMsg('Label.daterangetext')
});

从日期和到日期组件

{
    xtype : 'panel',
    items : [{
            xtype : 'displayfield',
            value : 'From Date'
        }, {
            id : 'msgFromDate',
            xtype : 'datefieldplus',
            vtype : 'daterange',
            endDate : 'msgToDate'
        }
    ]
}, {
    xtype : 'panel',
    items : [{
            xtype : 'displayfield',
            value : 'To Date'
        }, {
            id : 'msgToDate',
            xtype : 'datefieldplus',
            vtype : 'daterange',
            startDate : 'msgFromDate'
        }
    ]
}

【讨论】：