Material-ui: [DatePicker] Support clearing a DatePicker field value

[bendiy]

Once a DatePicker field is set, there is no way to clear it. You can only select a different date, not completely remove the date.

[bendiy]

Perhaps a modal isn't the best approach for every use case:
https://material.angularjs.org/latest/demo/datepicker

[ajsharp]

Bump. Another part of this problem is the inability to set a DatePicker defaultDate to a null value -- it causes an error. I believe this could be solved if DatePicker supported Calendar's initialDate property. When I try to set the defaultDate to null, I get an exception because Calendar expects a valid date in getInitialState when building the displayDate property.

[ajsharp]

Ah, actually, the fix is to set the defaultDate to undefined, not null.

[guigrpa]

Any chance this might be implemented? It seems to me a very important thing to be able to do in an input control: clear its value.

[mbrookes]

@guigrpa - PRs welcome! :smile:

[ajsharp]

@mbrookes I have a very simple bug fix coming for this. It's intended to be a backport on the 0.14.4 branch, so presumably a 0.14.5 release. It's a very simple change so should be trivial to cherry-pick it to HEAD. Does that work for you?

[jlroettger]

There was some good discussion in #1529

A clearable prop that generates an 'X' somewhere in the popover/dialog would be nice.

Alternatively, for those of us using a controlled value, it would be nice if we had an handler specifically for the cancel button. We can already change the label of the button with cancelLabel, for example to "Clear". With a handler we could just clear it out when that button is clicked.

I also really liked @nathanmarks suggestion for decoupling DatePicker from TextField and making it composable, but that's a different beast

[aahan96]

@mbrookes Submitted a PR to support clear date feature! 😄

[oliviertassinari]

Turns out, the clearing functionality is already supported. You can use the controlled approach. Have a look at the Controlled example of the documentation.

[jlroettger]

Hm, maybe I am missing something obvious. How are you clearing the value on the Controlled example from within the dialog window?

[sunspots]

Well, you can add a button or something in your parent container to change the value manually.
I would still prefer the ability to add a third button in the dialog, with customisable label.
In my use case, I have an "Expires" field. I'd like a "Never" button inside the dialog rather than adding an extra button to my form.

[oliviertassinari]

I would still prefer the ability to add a third button in the dialog, with customisable label.

That's sounds like a good idea. Would be great if users could provide their own DatePicker / TimePicker dialog button :+1:.

[jlroettger]

@sunspots Yeah, within the dialog window is the point. It's straightforward to add a clear button (or any other button) in the parent container using the value prop, but that's not what this issue is about.

Fortunately, in #4637 it was mentioned that the 0.16.0 release will include a refactoring that will make the DatePicker component more composable. It sounds like we will be able to add custom buttons inside the dialog window soon.

[GuillaumeCisco]

For those dealing with datePicker resetting and HOC, I've managed to create a clearable datePicker component with new Field API from redux-form: https://github.com/callemall/material-ui/issues/1529#issuecomment-235516337

[DanteNirav]

Hello,

I know this is closed, however, are we now able to create a composable date component ? @jlroettger based on your last comment.

Thanks in anticipation