Improve DatePicker to Allow Navigation to Months With All Dates Disabled

[kajetanaugust]

Provide a general summary of the feature here

Version: React: 18.2.0 @react-stately/calendar

Details:
In our current implementation of the DatePicker component that uses @react-aria/calendar and @react-stately/calendar, we observed a limitation that creates accessibility issues for our use case. When setting the minDate and maxDate properties, the DatePicker appropriately disables the dates that lie outside this defined range. However, an unexpected consequence of this is that entire months which only consist of disabled dates also become inaccessible via the MonthDropdown. In other words, a user cannot navigate to a month using the MonthDropdown if all the dates in that month lie outside of the minDate and maxDate range and are therefore disabled.

Does @react-aria/calendar or @react-stately/calendar provide a configuration or method that can allow this kind of DatePicker behavior? Or would it be possible to consider this feature for a future update? Any guidance would be greatly appreciated.

🤔 Expected Behavior?

While the current behavior does not precisely constitute a bug as it might have been an intentional design decision, it does create challenges for our specific use case. We would prefer if the MonthDropdown could still navigate to months that are entirely comprised of disabled dates. In such cases, all dates would indeed remain disabled within that month view, but a user would still be able to see that month and its disabled dates.

😯 Current Behavior

Currently, if a DatePicker is configured with a minDate and maxDate, the months which contain only dates that lie outside the minDate and maxDate range cannot be navigated to using the MonthDropdown as they are entirely disabled.

💁 Possible Solution

No response

🔦 Context

We believe this change would offer a better user experience by allowing users to view these disabled months in the calendar instead of completely preventing access to these months from the MonthDropdown component.

For example mui DatePicker allows for scrolling through disabled months with use of shouldDisableMonth prop.

💻 Examples

No response

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[LFDanLu]

I don't believe there is a setting currently that allows for navigation to the months/days that fall outside of the min/max due to

react-spectrum/packages/@react-aria/calendar/src/useCalendarBase.ts

Lines 74 to 85 in 4e3af37

	let nextDisabled = props.isDisabled || state.isNextVisibleRangeInvalid();
	if (nextDisabled && nextFocused) {
	setNextFocused(false);
	state.setFocused(true);
	}
	let [previousFocused, setPreviousFocused] = useState(false);
	let previousDisabled = props.isDisabled || state.isPreviousVisibleRangeInvalid();
	if (previousDisabled && previousFocused) {
	setPreviousFocused(false);
	state.setFocused(true);
	}

and

react-spectrum/packages/@react-stately/calendar/src/useCalendarState.ts

Line 134 in 4e3af37

date = constrainValue(date, minValue, maxValue);

which block the next/prev buttons and keyboard focus when at the max/min. I don't particularly see any harm in allowing that behavior, but I guess our thinking was that those disabled dates didn't add much value since you can't interact with them. Mind expanding on your use case? Are users perhaps wanting to visit these disabled dates because there is extra information you are announcing there?