search

adobe / react-spectrum

A collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.
https://react-spectrum.adobe.com
Apache License 2.0
12.8k stars 1.1k forks source link

Range Date Picker #7158

Open harsharavindra opened 3 days ago

harsharavindra commented 3 days ago

Provide a general summary of the feature here

We are trying to implement a RangeDatePicker with two separate input field and calendar to select start and end date. I was trying to find some example or documentation which is helpful to implement this, but I couldn't.

Please guide me if I am missing anything

Screenshot 2024-10-08 at 12 32 51 PM

🤔 Expected Behavior?

Two separate calendar to pick start and end date

😯 Current Behavior

Currently, we have to choose both start and end date from a single calendar.

💁 Possible Solution

No response

🔦 Context

Screenshot 2024-10-08 at 12 32 51 PM

💻 Examples

https://carbondesignsystem.com/components/date-picker/code/

https://www.npmjs.com/package/react-datepicker

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

LFDanLu commented 3 days ago

This previous issue feels related: https://github.com/adobe/react-spectrum/issues/4723. In short, I think it would require a fair amount of rewiring/modification of the current hooks to implement this experience due to the presence of two separate input fields and a number of assumptions we make when the user clicks on a cell in the calendar since we support range selection via drag