flowbite-react icon indicating copy to clipboard operation
flowbite-react copied to clipboard

DatePicker component defaultDate/clear not working as expected

Open kresimirlesic opened this issue 2 years ago • 5 comments
trafficstars

  • [x] I have searched the Issues to see if this bug has already been reported
  • [x] I have tested the latest version

Steps to reproduce

Create a default DatePicker component.

Current behavior

Component renders with today's date as the selected one, additionally, clearing out the date sets the selected date to today.

Expected behavior

Component input should be empty. Ideally, placeholder should be displayed if passed in.

kresimirlesic avatar Oct 03 '23 17:10 kresimirlesic

Well, I guess that the Datepicker references that I got were always displaying the "today" date as default. So... It is kind of, not a bug, 'cause it is working as it was programmed to do... but, got it... I guess that makes sense to level it empty sometimes.

rluders avatar Oct 03 '23 19:10 rluders

Hey @rluders , thank you for the quick response!

I did have to switch to react-datepicker for the time being until this gets resolved.

The way they do it is with a isClearable props, once you set it to true, you can clear out the field and assign null/undefined values.

... just a food for thought

kresimirlesic avatar Oct 03 '23 19:10 kresimirlesic

so if you pass a defaultDate prop then the DatePicker should render with that date selected? Is that the expected behavior? if so i am having this issue as well

mcle0463 avatar Nov 12 '23 00:11 mcle0463

One workaround for controlled Datepicker is that you can set value and placeholder props like this:

  const emptyProps = !value
    ? {
        value: "",
        placeholder: "Please select a date",
      }
    : {};

<Datepicker {...emptyProps } />

The "" value overrides the default formatted date, which will enable the native placeholder to be displayed...

But yeah, the Datepicker will still have its internal value. Good idea to make the Datepicker controlled as well.

MiroslavPetrik avatar Mar 14 '24 11:03 MiroslavPetrik

A isClear callback will be nice to set the date to null|undefined

In my case I will add a datepicker that is not mandatory to fill

taskrider2022 avatar Apr 17 '24 20:04 taskrider2022