Sometimes you need to select a date range in extjs, which requires automatic judgment. The selected start date cannot be greater than the end date, or the end date cannot be less than the start date. The implemented code is as follows
Reproduction picture:
As can be seen from the figure above, when a start time is selected, the selection range of the end time will be automatically limited, and the linkage between the two date selectors will be realized.
The code is as follows:
First define the linkage processing function:
Ext.apply(Ext.form.field.VTypes, { periodeange: 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; }, periodangeText: 'The start date must be less than the 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: 'Ym-d', width: 220, labelWidth: 90, msgTarget: 'side', autoFitErrors: false }, { xtype: 'datefield', fieldLabel: 'end', name: 'enddt', id: 'enddt', vtype: 'daterange', startDateField: 'startdt', format: 'Ym-d', width: 170, labelWidth: 40, msgTarget: 'side', autoFitErrors: false }, { xtype: 'button', text: 'query', iconCls: 'fljs', handler: function () { ...This code can be copied to extjs4.1.1 to run