如何禁用MUI DatePicker手动输入？使用preventDefault无效

你之前用onKeyDown结合preventDefault没生效，是因为这个事件没有绑定到DatePicker底层的输入框元素上，组件本身的onKeyDown无法拦截输入框的键盘输入。这里给你两种靠谱的解决方案：

方法1：使用readOnly属性（推荐） #

直接给DatePicker添加readOnly属性，这样输入框会禁止手动编辑，但仍然可以点击打开日历选择日期，完全符合需求：

<LocalizationProvider dateAdapter={AdapterDayjs}>
  <DatePicker
    id="leaveExtensionDate"
    value={leaveExtensionElements.leaveExtensionDate}
    shouldDisableDate={isDiabled}
    readOnly // 新增该属性
    views={["year", "month", "day"]}
    sx={{ width: "100%" }}
    onChange={handleLeaveExtensionDateChange}
    error={leaveExtensionElements.errorStatus.leaveExtensionDate}
    helperText={leaveExtensionElements.errorText.leaveExtensionDate}
  />
</LocalizationProvider>

如果觉得readOnly默认的灰色输入框样式不符合需求，可以用sx调整：

sx={{
  width: "100%",
  '& .MuiInputBase-input': {
    color: 'inherit',
    cursor: 'pointer'
  }
}}

方法2：通过inputProps绑定输入框事件 #

把键盘拦截事件传递到底层输入框，同时还要禁止粘贴操作，避免用户通过粘贴输入日期：

<LocalizationProvider dateAdapter={AdapterDayjs}>
  <DatePicker
    id="leaveExtensionDate"
    value={leaveExtensionElements.leaveExtensionDate}
    shouldDisableDate={isDiabled}
    inputProps={{ // 新增inputProps配置
      onKeyDown: (e) => e.preventDefault(),
      onPaste: (e) => e.preventDefault()
    }}
    views={["year", "month", "day"]}
    sx={{ width: "100%" }}
    onChange={handleLeaveExtensionDateChange}
    error={leaveExtensionElements.errorStatus.leaveExtensionDate}
    helperText={leaveExtensionElements.errorText.leaveExtensionDate}
  />
</LocalizationProvider>

内容的提问来源于stack exchange，提问作者Sai Krishna