在 MUI DateTimePicker 上禁用文本输入

Question

我的 React 应用程序中有一个 MUI

DateTimePicker

，我想禁用文本输入，以便只能通过单击图标并启动叠加层来编辑它们来更改日期/时间。

我尝试了一些方法，例如将

disabled={true}

添加到

renderInput

，如下所示：

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

但并没有达到预期的效果。我也尝试了很多其他事情，但不确定这些细节如何支持我的问题。

建议？

Answer 1

将

readOnly

添加到将传递到本机 html 输入元素的

inputProps

即可实现此目的。这也使 MUI 组件处于“正常”视觉状态。

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

Answer 2

我只需将禁用的道具添加到 renderInput 中的 TextField 即可完全按照您的要求进行操作。

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

当它只是假设组件上的属性意味着它被禁用时，您可能会尝试将禁用属性设置为 true。

Answer 3

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