RangeDatePicker with single date selector

[franpek]

Is your feature request related to a problem? Please describe.

RangeDatePicker lacks support for a single-view mode.

I would like to use the RangeDatePicker component with the date selector always visible, similar to inline mode, but displayed as a single calendar view even though it manages two input fields underneath to represent the start and end of the range.

Currently, if I hide the input for the end date (and therefore its date selector) and try to work only with the start date selector, it might seem sufficient to cover the range selection for both inputs, but there is one case it does not handle: If the user selects a start and end date using a single calendar view, they currently have no way to change the end date to an earlier value than the initially selected end. For example: if I select the start date as the 10th and the end date as the 15th, I can adjust the range by moving the start date freely. However, I cannot move the end date to an earlier day once it has been set — only to a later one. This effectively locks the end date from moving backward. For instance, if I change the end date to the 16th, I can no longer choose any date earlier than the 16th as the end date.

Additionally, I have also faced difficulties in simply keeping the range date selector constantly open, but I believe this to be a separate issue.

Describe the solution you'd like

I believe it would be ideal to enable a single-view mode for the RangeDatePicker with the following behavior:

• The first selected date becomes the start date.
• The second selected date becomes the end date as long as it is the same or later than the start date. If it is earlier, it becomes the new start date and the previously selected date becomes the end date.
• Once both dates are selected, if the user selects a new date, the previous range is cleared and the new date is set as the start date, repeating the behaviour described in the second point for the following selection.

I believe this is the standard behaviour used by popular date range pickers in other libraries.

Describe alternatives you've considered

I have tried various approaches but have not been able to solve this using the built-in Flowbite components.

Additional context

It could be that there is already a way to achieve this and I just haven’t found it, but I’ve invested enough hours into this to reasonably believe that it isn’t currently supported.

[boosh]

Just came to mention this. The current date range picker seems kind of cumbersome. It's not intuitive at all users can click on the same date picker to select a range, and if they do it gets messed up pretty quickly if they try to change the range.

E.g. selecting 5-10 of some month, then clicking "1" to try to select a new range, the 10 is still selected. This is against literally every travel/hotel, etc website's UX I've ever seen. I'd expect it to clear the end date in this case so users can select an entirely new range instead.

Would be great to see some improvements to the datepicker, and like @franpek said, to support all this on a single picker instance instead of needing 2 separate ones to manage 2 underlying form fields.