The date range selector

When selecting date ranges, the From date and the To date need to work in sync, so that the selected range is valid.

The Schedule Alerts panel built in this recipe, shows how to perform this type of validation. Selecting a From date constrains the To date values, as seen in the following screenshot:

Similarly, selecting a To date constrains the From date values, as seen in the following screenshot:

How to do it...

1. 1. Create a validation type for date ranges:

   Ext.apply(Ext.form.VTypes, {
   daterange: function(val, field) {
   var date=field.parseDate(val);
   if (!date) {
   return;
   }
   if (field.startDateField && (!this.dateRangeMax || (date.getTime()!=this.dateRangeMax.getTime()))) {
   var start=Ext.getCmp(field.startDateField);
   start.setMaxValue(date);
   start.validate();
   this.dateRangeMax=date;
   }
   else if (field.endDateField && (!this.dateRangeMin || (date.getTime()!=this.dateRangeMin.getTime()))) {
   var end=Ext.getCmp(field.endDateField);
   end.setMinValue(date);
   end...