Disabling text input on MUI DateTimePicker-CodePudding

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?

CodePudding user response：

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"
/>

CodePudding user response：

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.