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

eimct9ow 于 2023-04-19 发布在 Java

关注(0)|答案(4)|浏览(157)

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>

JavaScript

来源：https://stackoverflow.com/questions/71656771/unable-to-disable-keyboard-date-change-in-mui-datepicker-api

4条答案

按热度按时间

c3frrgcw1#

为了防止用户键盘操作，您可以将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} />
      )}
    />
)

赞(0）回复(0）举报 2023-04-19

wsxa1bj12#

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

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

赞(0）回复(0）举报 2023-04-19

6xfqseft3#

我做了两件事来解决这个问题：
1-设置渲染输入TextField为readOnly =〉no typing
2-add sx of TextField caretColor: 'transparent' =〉隐藏插入符号

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

赞(0）回复(0）举报 2023-04-19

rfbsl7qr4#

对于@mui/x-date-pickers”：“^6.1.0”：

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

赞(0）回复(0）举报 2023-04-19

我来回答

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

4条答案

相关问题

热门标签

最新问答