Hacker0x01 / react-datepicker

A simple and reusable datepicker component for React
https://reactdatepicker.com/
MIT License
8.09k stars 2.24k forks source link

[feature proposal] "auto range" better UX for large ranges #4658

Open mirus-ua opened 6 months ago

mirus-ua commented 6 months ago

Is your feature request related to a problem? Please describe. When you work with the range datepicker and your ranges are more than a month, the price of a mistake is high, so if you miss your endDate or startDate, you must redo everything from scratch. It means tedious scrolling back and forth through months to reselect the proper dates. I tried to visualize the pain in the video below.

https://github.com/Hacker0x01/react-datepicker/assets/29524085/f3498bd6-9814-4a7e-acd0-bee66723e290

Describe the solution you'd like We may extend the Datepicker component with an optional prop autoRange (or suggest a better name for it) that will prevent nullifying the range but rather modify a start or an end date according to simple logic:

if (clickedDate < middleDateOfTheRange) {
  startDate = clickedDate
} else {
  endDate = clickedDate
}

I see only one drawback: the ability to reset the range in the default calendar.

Describe alternatives you've considered I don't see other options for minimizing the cost of a mistake in the significant ranges.

Additional context I started the conversation with an issue rather than a PR because the proposal is essential for our users, but still it's controversial. It doesn't have a happy path to solve the UX problem, so I prefer to discuss it with the community first. If we agree on the proposal, I'll implement it.

mirus-ua commented 6 months ago

I've been thinking the optional prop can be named rangeStrategy and accept a union increase | decrease | both