validation - Extjs datefields desde o hasta las validaciones de fecha de finalización

date-range

Question

Esta es una mezcla de extjs para validar fechas de fecha de finalización o de inicio en un formulario. aquí está el mixin .. (el código central fue tomado del foro 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;
    }
});

Uso de la muestra de la mezcla anterior

Esta es una sección parcial de un formulario.

    {
        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);
        }
    }

Answer 1

Tipo de fecha personalizado de Vtype para la validación del rango de fechas:

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'')
});

Desde los componentes de fecha y hasta la fecha

{
    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''
        }
    ]
}