react-admin的DateInput组件输出ISO日期时输入框冻结如何解决？

你遇到的卡顿、格式报错问题核心是parse和format两个函数的逻辑不符合DateInput的底层运行规则：

• format属性的作用是把组件内部存储的Date对象转换为输入框展示给用户的字符串，你直接返回完整ISO格式串，和组件预期的日常日期格式（YYYY-MM-DD）不兼容，导致每次输入后组件反复执行解析→格式化→再解析的逻辑，触发死循环就出现了卡顿冻结。
• parse属性的作用是把用户输入的字符串转换为Date对象存储到组件内部，你现有逻辑会丢失时区信息，输入未完成时也容易生成无效Date对象，进而抛出无效日期错误。

正确实现方案（无需额外依赖） #

调整两个函数的逻辑即可，format只负责用户侧的友好展示，parse保证生成合法Date对象，react-admin提交数据时会自动将Date对象转为ISO格式传给后端：

// 格式化：将内部Date转成用户能看懂的YYYY-MM-DD格式，和组件默认交互逻辑兼容
const dateFormatter = (v: Date | null) => {
  if (!v || !(v instanceof Date) || isNaN(v.getTime())) return ''
  // 处理时区偏移，避免展示的日期和实际选择日期不一致
  return new Date(v.getTime() - v.getTimezoneOffset() * 60000).toISOString().split('T')[0]
}

// 解析：将用户输入的日期字符串转成带正确时区的Date对象，避免日期偏移
const dateParser = (v: string) => {
  if (!v) return null
  const [year, month, day] = v.split('-').map(Number)
  return new Date(year, month - 1, day)
}

组件调用和你原来的写法一致即可：

<DateInput 
  source="pub_date" 
  format={dateFormatter} 
  parse={dateParser} 
  defaultValue={new Date()} 
  label="Publish Date"  
/>

如果你的项目存在大量需要提交ISO格式的日期字段，更推荐直接在dataProvider的create、update方法里统一处理，所有日期字段提交前自动转ISO格式，无需逐个给DateInput加配置。

内容的提问来源于stack exchange，提问作者Shreyas Jadhav