无法在 MUI DatePicker API 中禁用键盘日期更改

Question

链接到 CodeSandBox ：codesandbox.io/s/dl5jft?file=/demo.tsx

我不希望用户通过键盘编辑日期，我希望他们从日期选择器模式中选择日期，如何禁用此功能？,

我使用了 ReadOnly 属性，但它本身禁用了日期选择，请在我执行 readOnly 时提供帮助，它禁用了整个输入，这使我无法打开模式来选择日期

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

Answer 1

为了防止用户键盘操作，您可以将事件的功能设置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} />
      )}
    />
)

Answer 2

对我来说，在最新的 @mui 5 中，其他解决方案无法正常工作。对我有用的唯一解决方案是：

<DatePicker
    dateAdapter={AdapterDateFns}
    renderInput={(params) => (
        <TextField
            {...params}
            inputProps={{...params.inputProps, readOnly: true}}
        />
    )}
/>