how to add a clear icon in Material-UI pickers inside of input

user_1180365 0
Viewed 636

I use Date picker inside of picker is an option to set it clearable, but this option is only when the picker is open

enter image description here

maybe is possible to add custom button like this:

enter image description here

Or maybe instead of doing something custom, to use another picker with option of clear inside of input?

material-ui reactjs datepicker
1 Answers

You can add InputProps with endAdornment key to your DatePicker component in order to customize the input element and add a custom icon like this:

InputProps={{
    endAdornment: (
      <div
        onClick={handleClear}
        style={{ marginRight: 20, cursor: "pointer" }}
      >
        <ClearIcon />
      </div>
    )
  }}

You can take a look at this sandbox for a live working example.

user_73994780
Related