themesberg / themesberg/flowbite-react

Allow Datepicker to be empty

Open
#1,393 4 comments 7 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
2.1k
Forks
506
PR merge metrics
No merged PRs in 30d

Description

Summary

Datepicker only allows to receive a valid Date but it would be really great if we could set null, "" or any kind of value that represents empty.

Context

So, i was working in specific use case where users can set a Date but this field is optional (null under the hood), so the user can also keep it empty.
When i start this i saw Clear button and i tought this was exactly what i was looking for but then i realize that this button only resets the field to defaultDate or minDate but never to "" (as native input does) or null. Since Clear button resets to defaultDate, would be great if defaultDate accepts null or even if onSeletedDateChanged could receive the current value and a second boolean prop like isClearAction so we can customize the logic.

For now, since im using React Hook Form to deal with validations, i've reached this by using the following approach:

type MyDatepickerProps = Omit<
  DatepickerProps,
  'showClearButton' | 'labelClearButton'
> & {
  onClear?: () => void;
};

const MyDatepicker = forwardRef<
  DatepickerRef,
  MyDatepickerDatepickerProps
>(({ onClear, ...rest }, ref) => {
  return (
    <div>
      <Datepicker
        ref={ref}
        {...rest}
        showClearButton={!onClear}
        labelClearButton="Reset"
      />
      {onClear && (
        <button
          onClick={onClear}
          type="button"
        >
          {/* This is just a X icon for the button */}
          <HiXCircle />
        </button>
      )}
    </div>
  );
});

And in the form (remember: im using React Hook Form):

<Controller
  control={control}
  name="my-field"
  render={({ field }) => (
    <MyDatepicker
      minDate={new Date()}
      value={field.value === null ? '' : field.value?.toDateString()}
      placeholder="Date"
      onSelectedDateChanged={field.onChange}
      onClear={() => field.onChange(null)}
    />
  )}
/>;

As you can see, im not using default onChange since it not triggers with current value. Thats why im using Controller to customize field actions.

Would be very very good to have this behavior on this component 🥺

EDIT: I've already read some issues about that but this is a feature request since it is not implemented.

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

Start at the Datepicker component and inspect how the Clear button, defaultDate, and onSelectedDateChanged currently handle values. Compare the existing behavior with the requested null or empty state, then verify that clearing an optional date produces the expected value without breaking defaultDate or minDate behavior.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.