Skip to content
This repository has been archived by the owner on Oct 27, 2022. It is now read-only.

DatePicker setting date to null #42

Open
alexbeletsky opened this issue Sep 16, 2016 · 4 comments
Open

DatePicker setting date to null #42

alexbeletsky opened this issue Sep 16, 2016 · 4 comments
Labels

Comments

@alexbeletsky
Copy link

I have a form where DatePicker is used, I can set some particular field with a date value and save the form. After, I want to delete the date to make it null. As I remove value completely, two things happen.

  1. moment.js writes a warning to console,

screenshot 2016-09-16 12 23 08

1. `onChange` handler of field is _not_ triggered. 2. If I reload the form, I can see the date is still there (so, a null field is not submitted to a server).

From code, I see that once a value is removed from the input field, getStateFromProps() will receive an empty string and construct default moment object.

I believe this behavior is wrong and prevents to set fields to null.

@alexbeletsky
Copy link
Author

@alexkuz do you see any particular solution for that, if so let's discuss, I'll submit a PR. We need that functionality anyways.

@alexkuz
Copy link
Owner

alexkuz commented Sep 19, 2016

I guess it should be like that:

  1. value should receive moment object, as you proposed
  2. onInputChange should be renamed to onChange and return raw text, onChange should be renamed to onSelect and return moment object.
  3. If user enters invalid date (including empty string), onSelect should return invalid moment object (with raw input value)
  4. Maybe there should be indeed defaultDate prop, that is set if value is not a valid moment object (or not a moment object at all). But I'm not sure.

Also, we should probably externalize moment, so it's not included in the library by default. That means maybe it's better to use Date object instead of moment object (and this would require additional locale prop).

@alexbeletsky
Copy link
Author

@alexkuz Thanks for a feedback, will take a look..

@alexbeletsky
Copy link
Author

hey @alexkuz .. I tried to apply the solution you proposed above, but seriously failed with it. If I'm able to make one part work, I broke another and otherwise.

So, I went another direction. Examined <DayPicker /> how it handles un-selection of dates and corrected <DatePicker /> accordingly. Now, if user un-selects date (clicking it twice), it would gone, onChange is triggered with null.

As for removing value completely (from input field), I did a workaround. I listen to onInputChange callback and if it's triggered with value = '', I set application state date to null. The component state date will remain the same, which I guess is not cool, but can be fixed as well.

The PR is here,

#46

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

No branches or pull requests

2 participants