Implementation of ExtJS time range selection

ExtJS sometimes need to select a date range, you need to automatically judge, the selected start date can not be greater than the end date, or the end date cannot be less than the start date, the implementation of the code is as follows

:

As you can see, when a start time is selected, the selection of the end time is automatically restricted, enabling the linkage of the two date selectors.

The code is as follows:

First define the linkage handler function:

 Ext.apply (Ext.form.field.VTypes, {daterange:function (val, field) {            var date = Field.parsedate (val);            if (!date) {return false; } if (Field.startdatefield && (!this.daterangemax | | (Date.gettime ()! = This.dateRangeMax.getTime ())))                {var start = field.up (' grid '). Down (' # ' + Field.startdatefield);                Start.setmaxvalue (date);                Start.validate ();            This.daterangemax = date; } else if (Field.enddatefield && (!this.daterangemin | | (Date.gettime ()! = This.dateRangeMin.getTime ())))                {var end = field.up (' grid '). Down (' # ' + Field.enddatefield);                End.setminvalue (date);                End.validate ();            This.daterangemin = date;        } return true;    }, Daterangetext: ' Start date must be less than end Date '}; Ext.tip.QuickTipManager.init (); 

Add in items in Tbar,bbar or form:

        {            xtype: ' Datefield ',            Fieldlabel: ' Time range start ',            name: ' Startdt ',            ID: ' Startdt ',            vtype: ' DateRange ',            Enddatefield: ' ENDDT ',            format: ' y-m-d ',            width:220,            labelwidth:90,            msgtarget: ' Side ',            Autofiterrors:false        }, {            xtype: ' Datefield ',            fieldlabel: ' End ',            name: ' ENDDT ',            ID: ' ENDDT ',            vtype: ' DateRange ',            startdatefield: ' Startdt ',            format: ' y-m-d ',            width:170,            labelwidth:            msgtarget: ' side ',            autofiterrors:false        }, {xtype: ' button ',            text: ' Query ',            iconcls: ' Fljs ',            handler:function () {...

Can achieve the above effect this code copy runs in extjs4.1.1