Implementation of extjs time range Selection

In extjs, you sometimes need to select a date range and automatically determine that the selected start date cannot be greater than the end date, or the end date cannot be smaller than the start date. The implementation code is as follows:

:

As you can see, when a start time is selected, the range of the end time is automatically limited to achieve the association of two date selectors.

The Code is as follows: <喎?http: www.bkjia.com kf ware vc " target="_blank" class="keylink"> VcD48cD7K18/ItqjS5cGqtq + 0 psDtuq/K/To8L3A + PHA + PGJyIC8 + pc9wpjxwp1_vcd48chjlignsyxnzpq = "brush: java;"> 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 earlier than end date'}); Ext. tip. quickTipManager. init ();

Add the following to items in tbar, bbar, or form:

{Xtype: 'datefield ', fieldLabel: 'start time range', name: 'startdt ', id: 'startdt', vtype: 'daterange ', endDateField: 'enddt ', format: 'Y-m-d', width: 220, labelWidth: 90, msgTarget: 'day', autoFitErrors: false}, {xtype: 'datefield ', fieldLabel: 'end', name: 'enddt', id: 'enddt', vtype: 'daterange ', startDateField: 'startdt', format: 'Y-m-d', width: 170, labelWidth: 40, msgTarget: 'day', autoFitErrors: false}, {xtype: 'call', text: 'query', iconCls: 'fljs', handler: function (){...

You can achieve the above results. This code is copied and runs in extjs4.1.1.