CODEWITHSUNDEEP
reactjsmaterial-ui
Federick J
Federick J

Reputation: 486

How to make Clear button work in MUI Date Picker

I am using a MUI TextField type='date' (Date Picker) in React project. The Clear button is not working. Ideally it should clear the date values and reset it to empty.

enter image description here

<TextField
  variant="outlined"                                                                              
  placeholder="DD/MM/YYYY"
  type="date"                                                                                 
  required
  sx={{
    svg: { color: '#fff' },
    input: { color: '#fff' },
  }}
  value={training.start_date.split('T')[0]}
  onChange={(e) => onChange(index, i, 'start_date', 
  e.target.value)}
  InputLabelProps={{
  shrink: true,
  }} />

Any idea how can I fix this.

Upvotes: 1

Views: 4282

Answers (1)

Dmitriif
Dmitriif

Reputation: 2433

You will have to delete the required prop from your TextField component to be able to use clear button. Also clear and today buttons are native buttons of input with type="date", not the MUI TextField's.

Upvotes: 1

Related Questions