如何预填充date range值？编辑页预填充触发控制台报错

问题现象 #

• 编辑页开发过程中，给日期范围（date range）组件配置预填充值，待填充日期为2022-06-03、2022-06-04
• 预期表现：组件正常渲染选中的日期区间
• 实际表现：预设日期未正常渲染，控制台抛出类型校验类报错

问题根因 #

绝大多数前端UI库的日期类组件，内部不会自动把YYYY-MM-DD格式的纯字符串识别为合法日期值，传入字符串时会触发内部Invalid Date校验错误，导致组件无法正常渲染选中态；如果赋值时机早于组件挂载完成，也会触发同类报错。

修复步骤 #

1. 转换预填充值格式
   禁止直接传入字符串格式的日期，根据所用组件的要求，将值转换为组件支持的格式：
   • 原生/支持Date实例的组件：转换为标准Date对象
   • 依赖时间处理库的组件：转换为对应库的包装对象（moment/dayjs/date-fns对应实例）
   • 要求时间戳的组件：转换为毫秒级时间戳
     示例代码：

   // 错误写法：直接传字符串
   // const dateRange = ['2022-06-03', '2022-06-04']
   
   // 正确写法1：转Date实例
   const dateRange = [new Date('2022-06-03'), new Date('2022-06-04')]
   
   // 正确写法2：转dayjs实例（适用于AntD v4+、Element Plus等用dayjs的组件）
   // import dayjs from 'dayjs'
   // const dateRange = [dayjs('2022-06-03'), dayjs('2022-06-04')]
   
   // 正确写法3：转毫秒时间戳
   // const dateRange = [new Date('2022-06-03').getTime(), new Date('2022-06-04').getTime()]
   

2. 调整赋值时机
   不要在组件未完成挂载时给绑定变量赋值，接口返回的预填充数据，需要在组件挂载完成后（对应框架的mounted/onMounted生命周期后）再赋值；如果使用表单的赋值API（比如setFieldsValue），也要等表单实例初始化完成后再调用。
3. 格式校验
   赋值前可以打印传入组件的值做校验，确认不存在Invalid Date的非法值，避免因为时区、日期字符串格式不规范导致的解析失败。

排查时可以直接翻对应组件文档的value属性说明，严格按照文档要求的格式传值，不要默认组件会自动解析任意格式的日期字符串。

内容的提问来源于stack exchange，提问作者code-8