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

【问题标题】：Unable to disable keyboard date change in MUI DatePicker API无法在 MUI DatePicker API 中禁用键盘日期更改
【发布时间】：2022-10-30 06:04:05
【问题描述】：

链接到 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>

【问题讨论】：

你能在codesandbox中分享你的代码吗？
嘿@MajidM。这是codesandbox.io/s/dl5jft?file=/demo.tsx 我想禁用日历的键盘编辑，只允许模式选择

标签： javascript reactjs material-ui calendar

【解决方案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} />
      )}
    />
)

【讨论】：

是的，它工作正常

【解决方案2】：

我做了两件事来解决这个问题：

1- 将渲染输入 TextField 设置为 readOnly => 不输入

2- 添加 sx 的 TextField caretColor: 'transparent' => 隐藏插入符号



<DatePicker
  renderInput={params => (
          <TextField
            {...params}
            InputProps={{
              readOnly: true,
            sx={{
              "& .MuiInputBase-input": {
                caretColor: 'transparent'
              }
            }}
          />
        )}
/>

【讨论】：

【解决方案3】：

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

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

【讨论】：