themesberg / themesberg/flowbite

RangeDatePicker with single date selector

Open
#1,100 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
HTML
Stars
9.4k
Forks
862
PR merge metrics
No merged PRs in 30d

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.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

The issue names the RangeDatePicker entry point but no implementation file or test. Start by locating that component and its existing single- and inline-view behavior, then verify the requested selection sequence: first date as start, an earlier second date reversing the range, and a third selection clearing the previous range.

Written by the indexing model from the issue text.

Assessment

Tech stack
tailwindcss
Domain
frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.