Material-ui-pickers: Option for trigger onChange even if date not accepted

[edidiway]

Hi, I am using the option "keyboard = true" and also I am implementing this date picker with redux form.
When user enter a blank value / invalid format, I want update the value to redux form. but I don't know where to do this. From the documentation onChange Callback only firing when date accepted.

And since I am using option keyboard = true, the user can type on the textbox directly.
When user fill in the valid date format, onChange will firing, and date value will be stored to state.
But when user type the empty/blank value, onChange will not firing, so here the state still hold the previous value while textbox show empty/blank value.

Environment

| Tech | Version |
|---------------------|---------|
| material-ui-pickers | 1.0.0-beta.10 |
| material-ui | 1.0.0-beta.25 |
| React | 16.1.0 |
| Browser | All |
| Platform | Windows 7 |

Steps to reproduce

1. Choose / type the valid date format
2. Then delete the date by click "backspace" on keyboard. Or type any invalid date

Expected behavior

1. date value (on the state) is saved as expected
2. date value (on the state) should be empty again

Actual behavior

1. date value (on the state) is saved as expected
2. date value (on the state) still hold the previous date, even the textbox already empty

[cherniavskii]

@edidiway Hi and thanks for taking your time submitting good bug report!
Indeed, currently there is no way to subscribe for every input field change.

We could provide an extra callback for this purpose:

• onTextFieldChange - will be fired with value argument (not date object) every time TextField value changed

cc @dmtrKovalenko @alitaheri

[alitaheri]

@cherniavskii Having 2 callbacks handling changes is very hard to reason about. (which should do what, and which I should use for task x).

I would provide a property that changes the behavior of onChange. changes it from (date: object) => void to (value: string, validDate?: object) => void. validDate is only passed when the input is valid and accepted.

However, that's too complex a solution for this particular problem. We need a way to clear the field. that's all. and the callback should be passed null or undefined when cleared (by keyboard or any other means)

[dmtrKovalenko]

@alitaheri I think changing callback its much more complex then onTextFieldChange -> this input would fire only if keyboard mode enabled, because mostly would be used just normal behavior with vanilla pickers it would be more convenient to have the date object in onChange.

From the flip call onChange with undefined - I think its better solution, because actually we are not applying date if its invalid.

[edidiway]

+1 for @dmtrKovalenko solution

[cthurston]

+1 for something that allows us to easily set the value back to empty string.

Ideally, this solution would not require keyboard to true.

My use case is someone sets a due date, and later may want to remove the due date. This cannot be done currently inside the pickers.

[dmtrKovalenko]

@cherniavskii Have we already done that?

[cherniavskii]

@dmtrKovalenko partially yes - #/148, not sure if this resolves the issue completely

[joergd]

I 2nd a way to fire an event every time the input field is changed. I am using this control in conjunction with devextreme's grid control. And I want to filter a column on a date.

But at the moment the user has to fill in the complete date&time using the keyboard - whereas I would want to start filtering as soon as the user starts typing in a date time.

Is there a way to currently do this? Either with that additional event or for me to modify on when the onChange event gets fired?

[dmtrKovalenko]

@joergd Actually no, because when you start typing for example April 19th the date can be parsed only when the you inserted all letters, same for time. We cannot fire events onChange of textfield, because its impossible to process the data. But as far I know we are firing onChange with undefiend when date is not applied.

[dmtrKovalenko]

I`m closing this issue due to no updates. If you are still experiencing it, please write about it and I will reopen it

[simonemazzoni]

Hello @dmtrKovalenko ,
I would like to reopen this issue since I'm experiencing this problem.

You can see the problem in this CodePen. Try to clear the input and you can see that it remains red saying InvalidDateFormat.

I'm using the InlineDatePicker and because of this bug I don't know how to let users clear the input, and since I use this input as a filter, I don't know hot to let users clear the filter.

I found a workaround using the onInputChange callback checking for "" value and set the value to null, but doesn't seem a clean solution at all to me. Plus I have to define a dedicated callback just to allow to clear the inputs.

[dmtrKovalenko]

[dmtrKovalenko]

Just remove internal validation from the picker

[simonemazzoni]

Just remove internal validation from the picker

This doesn't seem to be clear too, since I'm still interested is telling users when a date is not valid.
I just want to mark empty string value as null.

[dmtrKovalenko]

Then add control that will assign value to null. Some button.

[simonemazzoni]

Then add control that will assign value to null. Some button.

That could be another solution. But it requires an extra button to place somewhere that could mess up the UI. So I think I will just stick with my onInputChange solution.

I really don't understand the concern about firing the onChange callback on empty string value, passing for example null as callback argument.

[dmtrKovalenko]

Because that will clear input. When value to null datepicker clears

[simonemazzoni]

Because that will clear input. When value to null datepicker clears

But the input is already cleared, because the user cleared the input itself!

[dmtrKovalenko]

So actually dispatching null when the new value is empty string is a proper way. Now I considered that it should works this way.
But only !! For empty strings. For something like Jan it should not be dispatched

[simonemazzoni]

But only !! For empty strings. For something like Jan it should not be dispatched

Precisely!! 🎉🎉

This will allow to clear the input on inline date picker.
You could also let users decide to enable or disable it using the clearable prop.
I see that up to now that prop works only in DatePicker and not in InlineDatePicker.

[simonemazzoni]

@dmtrKovalenko I had a look at the code and I noticed that probably the problem can be solved editing the parse method in @date-io/moment package.
I saw also that you committed a promising update in @date-io.
Are you already fixing the issue?
I ask this because I have code to release in production and I'm interested in knowing the ETA of the official release, whereas I have to fork the library and fix it manually till the release.

[dmtrKovalenko]

Yes today I have committed an update that should fix parsing empty strings behavior as null. I will make a new release today lately. Happy if that will help you! 👍

[simonemazzoni]

@dmtrKovalenko great! Thanks a lot!

BTW great work with this project! 👌

[dmtrKovalenko]

Have published 0.0.2 version of @date-io/moment @simonemazzoni check if that help you

[simonemazzoni]

@dmtrKovalenko just updated and tried.
Now it does not set the input to error on empty string, but still doesn't fire the onChange callback.

[depiction]

This should be re-opened because it wasn't solved. I want to be able to disable past dates in the calendar from selection, allow users to type in a date, and display relevant error messages while using redux form.

If a user enters a valid date then changes the date to be invalid, redux form has no way of knowing that because onChange isn't fired.

I can remove all validation related props from DatePicker like disablePast, minDate, and maxDate, then create my own custom validators that work with Redux. However, users will still be able to select an invalid date in the datepicker. They won't know it's invalid until after they select a date and the custom validator runs.

[clarson0]

@depiction i was able to use onError to get the invalid date value and inform redux / my own form validation of the attempted date value change

https://github.com/mui-org/material-ui-pickers/issues/1032#issuecomment-489901771