如何禁用react-admin DateInput手动编辑且保留日期选择功能

你之前传入的editable={false}没有生效，是因为react-admin@3.10.4版本的DateInput组件本身没有定义这个透传属性，这个参数不会被传递到底层承载输入的原生DOM元素上，自然不会产生任何效果。

你不需要修改组件本身的源码，利用DateInput自带的InputProps透传能力就可以实现「禁止手动键入、保留日期选择器触发能力」的效果，核心逻辑是堵死所有手动修改输入框内容的入口，同时不干预组件本身点击弹出选择面板的交互。

方案1（优先推荐，适配绝大多数场景） #

import { DateInput } from "react-admin";

<DateInput
  source="myDate"
  InputProps={{
    inputProps: {
      // 给原生input设置只读属性，从基础层面禁止手动键入
      readOnly: true,
      // 额外拦截键盘输入、粘贴操作，避免特殊方式绕过限制
      onKeyDown: (e) => e.preventDefault(),
      onPaste: (e) => e.preventDefault(),
    }
  }}
/>

这个配置的实际效果：

• 输入框完全不响应用户的手动文本输入、粘贴操作，无法直接键入日期内容
• 点击输入框区域、右侧日历图标时，依然可以正常弹出日期选择面板，选完日期后值会正常回显、同步到表单字段
• 注意：不要直接给DateInput设置disabled={true}，这个属性会把整个组件置为不可交互状态，不仅无法手动输入，连点击弹出日期选择器的逻辑也会被完全阻断，不符合需求。

方案2（兼容特殊版本的边界情况） #

如果你使用的@material-ui/lab版本存在「设置readOnly后点击输入框无法弹出选择面板」的兼容问题，可以移除原生readOnly属性，改成从事件层面拦截所有手动输入行为：

<DateInput
  source="myDate"
  InputProps={{
    inputProps: {
      // 把光标样式改成和点击区域一致，避免交互疑惑
      style: { cursor: "pointer" },
      // 拦截除Tab键外的所有键盘输入，保证基础键盘可访问性
      onKeyDown: (e) => {
        if (e.key !== "Tab") e.preventDefault();
      },
      onPaste: (e) => e.preventDefault(),
      // 兜底拦截所有输入事件，阻止任何手动修改输入框值的行为
      onInput: (e) => {
        e.preventDefault();
        e.target.value = e.target.defaultValue || "";
      }
    }
  }}
/>

内容的提问来源于stack exchange，提问作者mcfly soft