Allow independent selection of either start or end date with useRangeCalendar

[hadelyar-nex]

🙋 Feature Request

Currently, there's no way to be able to only change the end date after you have a range selected. It would be good to have functionality for this.

🤔 Expected Behavior

Should be allowed to select only start or end as well as the entire range.

😯 Current Behavior

Limited to selecting the entire range each time.

🔦 Context

I'm trying to build a calendar implementation similar to the Google Flights calendar. I have two input fields and using the useRangeCalendar hook.

Where a user can select a date range, and then at a later point, allowed to change only the start date or end date whilst keeping the rest of the range.

💻 Examples

Google Flights calendar implementation
And also by this library

🧢 Your Company/Team

[LFDanLu]

Currently, users can drag the start/end date to modify the current range but we'll have to add a keyboard equivalent. Just to clarify, you specifically want the behavior where the user clicks into the input field and then clicks into the calendar to set the corresponding start/end date? Or are you having difficulties modifying the start/end date via changes in the input field? The team was also concerned about the accessibility experience of the Google Flights calendar implementation since focus seems to never make it into the calendar itself via Tab and is moved back and forth between the next/previous input upon date confirmation, making it unclear to a screen reader user that there is a calendar to interact with.

[hadelyar-nex]

@LFDanLu Thanks for getting back to me.

Correct, I want the user to be able to click on the input field and then click on the calendar to set the corresponding start/end date as you mentioned. It would also enable us to highlight the relevant field as they're interacting with the calendar, just to provide a visual queue as to what the user is changing.

I had no idea you could drag the start/end date, that's really good to know, but I still think intuitively, it would help having what I mentioned as it's not always clear for a user that they can drag it.

Keyboard equivalent for accessibility would also be welcome.

[LFDanLu]

I see. And just for clarification, would you expect the range calendar to behave 1:1 as the Google Flights calendar (aka clicking on the cells always sets the start/end date range alternatively, with focus always returning to the inputs)? The reason I ask is this feels like a pretty custom experience that wouldn't easily mesh with the current implemented range calendar interactions, especially with much of the interaction behavior being set up within useCalendarCell.

[hadelyar-nex]

@LFDanLu no it doesn't have to be 1:1, I just want to improve the relationship with the calendar and it's corresponding input elements.

[hadelyar-nex]

@LFDanLu Hey, wondering if there's a possibility this will be picked up in the near future because unfortunately we may need to switch to a different library if not

[LFDanLu]

It is unlikely that this will be picked up by the team in the near future due to conflicting priorities unfortunately.

[hadelyar-nex]

@LFDanLu sure, thanks for getting back to me!