无法在 MUI DatePicker 中禁用键盘日期更改 API
Unable to disable keyboard date change in MUI DatePicker API
Link 到 CodeSandBox : codesandbox.io/s/dl5jft?file=/demo.tsx
我不希望用户通过键盘编辑日期,我希望他们 select 来自日期选择器模式的日期,如何禁用它?,
我使用了 ReadOnly 属性,但它禁用了日期 selection 本身,请在我使用 readOnly 时提供帮助,它禁用了整个输入,这使我无法打开 select 的模态] 日期
<GlobalStyle />
<CalendarContainer>
<LocalizationProvider dateAdapter={AdapterDateFns}>
<DatePicker
value={calendarVal}
onChange={(newValue) => {
handleChange(newValue);
}}
disabled={disabled}
inputFormat="dd-MM-yyyy"
renderInput={(params) => (
<TextField
// eslint-disable-next-line react/jsx-props-no-spreading
{...params}
name={name}
error={error}
disabled={disabled}
/>
)}
/>
</LocalizationProvider>
</CalendarContainer>
为了防止用户键盘操作,您可以将 onKeyDown
事件的功能设置为 preventDefault
并将其分配给 TextField
:
const onKeyDown = (e) => {
e.preventDefault();
};
return (
<LocalizationProvider dateAdapter={AdapterDateFns}>
<Stack spacing={3}>
<DesktopDatePicker
label="Date desktop"
inputFormat="MM/dd/yyyy"
value={value}
onChange={handleChange}
renderInput={(params) => (
<TextField onKeyDown={onKeyDown} {...params} />
)}
/>
)
Link 到 CodeSandBox : codesandbox.io/s/dl5jft?file=/demo.tsx
我不希望用户通过键盘编辑日期,我希望他们 select 来自日期选择器模式的日期,如何禁用它?
我使用了 ReadOnly 属性,但它禁用了日期 selection 本身,请在我使用 readOnly 时提供帮助,它禁用了整个输入,这使我无法打开 select 的模态] 日期
<GlobalStyle />
<CalendarContainer>
<LocalizationProvider dateAdapter={AdapterDateFns}>
<DatePicker
value={calendarVal}
onChange={(newValue) => {
handleChange(newValue);
}}
disabled={disabled}
inputFormat="dd-MM-yyyy"
renderInput={(params) => (
<TextField
// eslint-disable-next-line react/jsx-props-no-spreading
{...params}
name={name}
error={error}
disabled={disabled}
/>
)}
/>
</LocalizationProvider>
</CalendarContainer>
为了防止用户键盘操作,您可以将 onKeyDown
事件的功能设置为 preventDefault
并将其分配给 TextField
:
const onKeyDown = (e) => {
e.preventDefault();
};
return (
<LocalizationProvider dateAdapter={AdapterDateFns}>
<Stack spacing={3}>
<DesktopDatePicker
label="Date desktop"
inputFormat="MM/dd/yyyy"
value={value}
onChange={handleChange}
renderInput={(params) => (
<TextField onKeyDown={onKeyDown} {...params} />
)}
/>
)