Material-ui-pickers: Prop to add a Clear Button

[badbyte7]

Tech | Version
-- | --
@material-ui/pickers | v3.0.0
material-ui | v4.1.3
React | v16.8.6
Peer library | date-fns

In material-ui-pickers v2 it was possible to pass InputProps to the (Keyboard)DatePicker, which we used to add a clear button next to the date button (similar to #1119 , but both buttons are shown at the same time).

Now it is only possible to configure the props of the adornment, so we have no possibility to create this feature in the new version of the picker. I've tried to use the InputAdornmentProps, KeyboardButtonProps and TextFieldProps but couldn't find a solution.

Could you please provide a possibility to get a clear button?

I think it would be nice to have a boolean flag, which, if set, shows the clear button in the TextField (InputAdornment). If the clear button gets clicked, it could call the onChange with undefined.

[dmtrKovalenko]

Please use smth like that https://codesandbox.io/s/material-ui-pickers-usage-demo-2vnf5

[badbyte7]

Thank you very much!

The InputProps prop is missing in the documentation https://material-ui-pickers.dev/api/KeyboardDateTimePicker.

[dmtrKovalenko]

Because they are a part of https://material-ui.com/api/text-field/#props. Just spreading down

[badbyte7]

Our QA found a little shortcoming with this solution: this example.

If weset the InputAdornment to start, the label is always shown at the top, even if the display is set to none. Afaik this is a mui feature.

After looking into your code, I think I've found a pretty simple way to make the whole solution easier:

If you could change the order of spreading the InputProps into the TextField (at first the default Adornment with the library picker, and after that the user given InputProps), the user should be able to override the default InputAdornment with InputProps. material-ui-pickers/lib/src/_shared/KeyboardDateInput.tsx:104

So it should not be neccessary to set an StartInputAdornment, and the label stays in the field, if the Input is empty.

[andriyloza]

I found solution how to put both clearIcon and dateRangeIcon to the right side

For now we can change order of buttons and input but add css property (order: 2) for

InputAdornmentProps={{
position: "start"
}}

full solution:

InputProps={{
startAdornment: (
<IconButton onClick={() => this.handleClear()} disabled={!inputValue} style={{order: 1}}>
<ClearIcon color="disabled" fontSize="small" />
</IconButton>
)
}}
InputAdornmentProps={{
position: "end",
style: {order: 2, marginLeft: 0}
}}