[Feature]: Improve `DateRangePicker` UX

[filipeveronezi]

What problem does this feature solve?

It would be great to have a better UX with the DateRangePicker component.

Here are some problems that I see related to the current UX:

1. When a date range is already selected:

a. The first click before the selected date range changes the value of from.

b. The first click inside or after the selected date range changes the value of to.

Here's a use case where I think this is bad UX: if a date range of 9 - 18 is selected and the user wants to select 10 - 19, I guess the fastest way would be double clicking 10 and then clicking 19, which is not intuitive at all.

Another option would be using the "X" icon to clear the selected range and then select the desired range, but this leads the user to move off the Popover context and execute a 2-step action, personally I had to stop and think before doing this at my first ever interaction with this component.

This behavior is probably okay if the initial state of the input is empty (still not the best imo), but I'm working on a project where the initial input state is set to "last 7 days", which makes this behavior really unintuitive for users who want to change the date range completely. It gets worse if you think of a possible real application where the onChange event triggers some data loads and disable the input while loading, making the user wait for a range selected by mistake because of unintuitive UI.

Suggested solution

• Every first click inside the calendar sets from to the clicked day and sets to to null.
• This behavior could be opted in by a boolean prop called clearOnClick or startNewRangeOnClick, for example.

2. When minValue or maxValue is defined, there's no visual/interactive representation of date range limitation

Here's an example where I try to select a not allowed date and have to come back to actually discover a range limit:

Suggested solution

• Block navigation to months where there are no allowed dates.
• Use smaller contrast or different colors plus cursor-not-allowed to visually represent not allowed dates.

3. Popover looks weird in the disabled state

Suggested solutions

• Option A: keep Popover closed when disabled, as it has no reason to be kept open.
• Option B: Use contrast to better represent a "no interaction allowed" component and fix hover issues.

Final considerations

• I'm not an active nor frequent OSS contributor, so I hope this issue finds you well enough.
• I'm 100% willing to contribute with code to solve the problems I've described, but UX is very subjective, that's why I want to start with a discussion before anything. I may be wrong in my assumptions.
• I'm a long-time user and admirer of Tremor, it has helped me a lot in so many projects.

[severinlandolt]

Thank you for your details issue/feature report! 🙏 Definitely something we aim to improve in one of the next releases, will come back to this we are working on that!

[filipeveronezi]

@severinlandolt Nice! Looking forward for it, let me know if I can help with anything 😁