How to make the field nullable or remove the selected date?

[lostmarinero]

I am using SingleDatepicker and am trying to allow the field value to be removed in the event someone selected a date but then realizes they do not want one (it is an optional field for my form). I am using it with react-hook-form as well. Is this possible?

[aboveyunhai]

you probably need a clear button #9 which setDate(undefined)?

[fruitbang]

i think there is a bug: when i setDate to undefined, value of input component won't clear

[robcrockhlx]

This was also an annoyance for me, but I worked around it by managing the state separately. I wish the individual inputs were easier to manage.

[aboveyunhai]

@robcrockhlx @fruitbang
if you guys have a common expectation (pseudo code) what the usage will be look like combining with whatever form libs or your own code. Then I can have an idea how to make the change. something like;

   //  your code here that would do something to the value and what's the expectation
   <Datepicker value={value}/>

but the single <input/> doesn't reset is definitely a bug. let me fix it then.

[robcrockhlx]

@aboveyunhai thank you for being open to the improvement.

Here's a screenshot if how I added an icon button to clear the input when the formState[dateName] property is not undefined.

Here's the clear date handler

And here's where I hackily add a formKey that's just new Date.now() to force a rerender of the form so that the date inputs display to updated values.

I think the issue and coupling we're hoping for is to work well with the Controller component from react-hook-forms https://react-hook-form.com/docs/usecontroller/controller