Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
lostmarinero opened this issue Jul 7, 2023 · 5 comments
Open

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

lostmarinero opened this issue Jul 7, 2023 · 5 comments

Comments

@lostmarinero
Copy link

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?

@lostmarinero lostmarinero changed the title How to make the field nullable? How to make the field nullable or remove the selected date? Jul 7, 2023
@aboveyunhai
Copy link
Owner

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

@fruitbang
Copy link

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

@robcrockhlx
Copy link

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
Copy link
Owner

@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
Copy link

robcrockhlx commented Jul 1, 2024

@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.

image

Here's the clear date handler
image

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.

image

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

@aboveyunhai aboveyunhai mentioned this issue Aug 7, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants