useCalendarCell equates "outside of visible range" with "disabled".

🐛 Bug Report

useCalendarCell returns true for isDisabled when calendar dates are outside the visible date range (i.e. isOutsideVisibleRange is true), but are still within minValue and maxValue, and are not passed an isDisabled prop. This is preventing click/press events on those dates.

🤔 Expected Behavior

You should be able to click on dates that are outside the “visible” date range of the current month, but aren’t otherwise marked as unavailable or disabled. This would mirror the behavior in the native HTML5 datepicker.

😯 Current Behavior

Dates outside of the visible date range are being marked as isDisabled internally. This prevents any of the click/press events from firing. Based on the description of isDisabled , I believe this could be a bug.

E.g., If I’m looking at June 2022, July 1st can be made visible, but cannot be made clickable (because it is being marked internally as isDisabled). However, July 1st is enabled and clickable from the July 2022 calendar.

💁 Possible Solution

Dates outside of the current month should not be marked as isDisabled. From a styling perspective, we still have isOutsideVisibleRange to work with, and the dates would still be properly disabled if they fell outside of the min/max values.

If this is expected behavior and changing this would constitute a breaking change, adding a calendar-level prop something like disableOutsideVisibleRange and defaulting it to true would provide users a viable workaround.

🔦 Context

I am trying to replicate behavior found in the standard HTML5 datepicker, wherein selecting a date from the previous/next month, if it is visible in the calendar, is possible. My goal is to not lose features when switching over.

💻 Code GIF Sample

Here’s a GIF of my implementation of useDatepicker, useCalendar, etc:

And here’s an example of the same behavior with a standard HTML5 <input type="date" />:

🌍 Your Environment

Software	Version(s)
react-spectrum	3.0.0
Browser	Chrome
Operating System	macOS Big Sur

🧢 Your Company/Team

N/A

🕷 Tracking Issue (optional)

N/A

[Drogglbecher]

I face the same problem while trying to implement a DateRangePicker based on the RangeCalendar. Is there currently any status update or workaround?

[devongovett]

One problem with this design is the dates still look disabled visually (grayed out). If they are interactive, they’d need to meet WCAG contrast minimums as well to be accessible. Not to say we shouldn’t support more control here though.