CODEWITHSUNDEEP
reactjsmaterial-uidatetimepicker
serlingpa
serlingpa

Reputation: 12660

Disabling text input on MUI DateTimePicker

I have a MUI DateTimePicker in my react app, and I would like to disable the text input so that it is only possible to change the date/time by clicking on the icon and launching the overlays to edit them.

I have tried a few things, such as adding disabled={true} to the renderInput, like this:

renderInput={(params: any) => <TextField
                {...params}
                disabled={true}
                InputProps={{...params.InputProps, disableUnderline: true}}
                variant="standard"/>}

Doesn't quite work as expected though. I have tried a lot of other things too, but not sure how that detail would support my question.

Suggestions?

Upvotes: 0

Views: 4405

Answers (3)

Bansi Vaniya
Bansi Vaniya

Reputation: 1

 <DateTimePicker
 onChange={handleChange} value={value} minDate={minDate}
 slotProps={{
      textField: {
        inputProps: {
          readOnly: true,
        },
      },
    }}/>

Upvotes: -1

Ricky Clark III
Ricky Clark III

Reputation: 101

I was able to do exactly what you're asking by just adding the disabled prop to the TextField in renderInput.

<DateTimePicker
  label="Date&Time picker"
  value={value}
  onChange={handleChange}
  renderInput={(params) => <TextField {...params} disabled />}
/>

It's possible that you are trying to set the disabled property to true when it just assumes the property being on the component means it is disabled.

Upvotes: 0

RubenSmn
RubenSmn

Reputation: 4642

Adding readOnly to the inputProps which will be passed down to the native html input element will do the trick. This also leaves the MUI component in its "normal" visual state.

<TextField
  {...params}
  disabled={true}
  InputProps={{...params.InputProps, disableUnderline: true}}
  inputProps={{ ...params.inputProps, readOnly: true }}
  variant="standard"
/>

Upvotes: 1

Related Questions