无法在 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}}
        />
    )}
/>

Answer 3

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

1- 将渲染输入 TextField 设置为

readOnly

=> 不输入

2- 添加 TextField 的 sx

caretColor: 'transparent'

=> 隐藏插入符号

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

Answer 4

对于@mui/x-date-pickers": "^6.1.0":

<DatePicker      
    slotProps={{
        textField: {
            readOnly: true,
        },
    }}
/>

Answer 5

@mui/x-date-pickers 6 以上，renderInput 已弃用

      const disableKeyboardEntry = (e: any) => {
         if (e?.preventDefault) { 
        e?.preventDefault();
        e?.stopPropagation();
    }
}

    <DatePicker 
         views={['year']}
         label={'From'}
         minDate={moment('1990', 'YYYY')}
         maxDate={moment().endOf('year')}
         slotProps={{ 
         textField: { 
         onBeforeInput: disableKeyboardEntry, 
           
        variant: 'standard' } 
      }}
      />

Answer 6

在 @mui/x-date-pickers 6.16 for slot 的文档中 https://mui.com/x/api/date-pickers/date-picker/#slots 您可以阅读该字段：用于输入的组件用键盘输入日期。 https://mui.com/x/api/date-pickers/date-picker/#DatePicker-slots-field。

在我的情况下，我想禁用键盘输入，但日期选择器仍然有效。我添加了 slotProps={{field:{readOnly:true}}

                  <DatePicker
                        label={label}
                        value={value}
                        onChange={onChange}
                        format="yyyy-MM-dd"
                        slotProps={{
                            field: {
                                readOnly: true
                            }
                        }}
                    />