如何在 MUI datepick V5 中禁用键盘输入？

Question

过去，我在@material-ui/date-pickers 中使用了 DatePicker，它只允许选择器。

在我的项目中，我升级到 MUI V5 并遵循此文档https://mui.com/x/react-date-pickers/migration-lab/

-import { DatePicker } from '@material-ui/pickers';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';


 <DatePicker
    label="Basic example"
    value={value}
    onChange={(newValue) => {
      setValue(newValue);
    }}
    renderInput={(params) => <TextField {...params} />}
  />

迁移到 v5 后，该组件允许键盘输入，这导致我的系统出现问题。

这是因为我们系统的日期格式显示为“dd-MMM-yyyy”。 如果组件允许键盘输入，使用“dd-MMM-yyyy”这种格式会引起一些问题。 因此，我希望禁用键盘输入只允许选择器。

我可以知道如何禁用它吗？ 谢谢

Answer 1

我找到了解决方案。 在 TextField 的 inputProps 中添加了“readOnly: true”。

<DatePicker
    label="Basic example"
    value={value}
    onChange={(newValue) => {
      setValue(newValue);
    }}
    renderInput={(params) => (
      <TextField
        {...params}
        inputProps={{
          ...params.inputProps,
          readOnly: true
        }}
      />
    )}
  />