[英]How can disable the keyboard input in MUI datepick V5?
In the past, I used DatePicker in @material-ui/date-pickers, which only allow picker.过去,我在@material-ui/date-pickers 中使用了 DatePicker,它只允许选择器。
In my project, I upgraged to MUI V5 and follow this doc https://mui.com/x/react-date-pickers/migration-lab/在我的项目中,我升级到 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} />}
/>
After migrated to v5, the compoent allows keyboard input, which cause an issue in my system.迁移到 v5 后,该组件允许键盘输入,这导致我的系统出现问题。
It is because our system's date format displays with "dd-MMM-yyyy".这是因为我们系统的日期格式显示为“dd-MMM-yyyy”。 If the compenent allows the keyboard input, it will cause some probelms with using this format 'dd-MMM-yyyy'.如果组件允许键盘输入,使用“dd-MMM-yyyy”这种格式会引起一些问题。 Hence, I hope to disable the keyboard input only allow the picker.因此,我希望禁用键盘输入只允许选择器。
May I know how can disable it?我可以知道如何禁用它吗? Thanks谢谢
I found a solution.我找到了解决方案。 Added the "readOnly: true" to TextField's inputProps.在 TextField 的 inputProps 中添加了“readOnly: true”。
<DatePicker
label="Basic example"
value={value}
onChange={(newValue) => {
setValue(newValue);
}}
renderInput={(params) => (
<TextField
{...params}
inputProps={{
...params.inputProps,
readOnly: true
}}
/>
)}
/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.