-
Notifications
You must be signed in to change notification settings - Fork 831
Description
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.