Ext version tested:
6.6.0 Modern Toolkit

Browsers tested:
Chrome
Edge

Fiddle:



Description:

I wanted to make a date range field using two datefields / datepickerfields for the starting date and ending date, like this Classic Kitchen Sink example. However, I am using the Modern toolkit, not Classic, so I was not able to use VTypes. Instead, I used change listeners to set either the min or max date for the opposite field. If a start date is selected, that selected date should be set as the minDate for the end date field, and if an end date is selected, that should be set as the maxDate for the start date field.

There are two issues, likely bugs with Ext.field.Date, that come up here.

The first is that setting either a minDate or maxDate in a different month than that of a datefield's current value messes up the month navigation. You must navigate in the opposite direction of the minDate or maxDate month in order to then navigate towards it.

The second is that when a minDate or maxDate is set in a month other than that of a datefield's current value, invalid days are disabled (as they should be), but they remain disabled even when the minDate / maxDate that made them invalid is set to a different day that would make them valid.


Steps to reproduce the problem:

Issue #1: Navigation Issue:

Navigation issue with minDate:

1. Open up the date picker for the starting date, move back one month, and pick any day.
2. Open up the date picker for the ending date, and try to move back one month. You will not be able to, despite there being valid days to select in that month.
3. To successfully move back one month, you must move forward two months, and then move back three. Yes, "what the heck" indeed.

The navigation issue with maxDate is pretty much the same, just in reverse. However, I wasn't able to reproduce this one as reliably.

-Expected Behavior-
I can move back a month to pick valid dates.

-Actual Behavior-
I can't.


Issue #2: Dates Remaining Disabled After minDate is Changed:

1. Do steps 1-3 of Issue #1 above. You should be in the same month as the minDate that was set, and you should see that the dates before whatever you selected are disabled.
2. Select one of the remaining valid dates.
3. Open up the date picker for the starting date, and choose an earlier date in the same month.
4. Open up the date picker for the ending date. Despite the minDate being pushed back, the disabled dates from the first minDate remain disabled, and thus, there are dates that should be valid choices that are disabled.

5. Interestingly, if you then move forward three months and back three months (yep), you will see that the dates that were previously disabled despite being valid are no longer disabled. The date picker seems to update properly when you move through multiple months.

-Expected Behavior-
The previously disabled dates that are now valid due to a change in minDate will no longer be disabled.

-Actual Behavior-
These valid dates remain disabled, unless multiple months are moved through in the date picker.