时间下拉框选值后始终显示今日日期的问题如何解决

排查方向按优先级排序 #

• 先校验绑定值的格式合法性
  确认传入组件的受控值格式和组件要求完全匹配：不同时间组件接收的值类型不同，可能是标准Date对象、10/13位时间戳、或是指定格式的时间字符串（如YYYY-MM-DD HH:mm）。如果传入值格式不匹配、或是转码过程中生成了非法时间对象，组件无法识别合法选中值，就会自动 fallback 到默认的今日日期。重点排查赋值环节是否存在时区计算错误、字符串转Date时传参错误导致值失效。
• 检查受控状态的更新逻辑
  如果是React/Vue等框架下的受控组件，先确认选中触发onChange/update:modelValue回调时，是否正确把回调返回的选中值同步到了绑定的状态变量上。常见错误包括：回调内只做了业务逻辑没更新状态、赋值时写错变量名、状态更新时引用未变化触发不了组件重渲染。同时检查组件的打开、聚焦事件中，是否误写了把值重置为今日日期的逻辑，每次交互就覆盖了已选值。
• 排查配置项冲突
  不要在受控模式下同时给组件传defaultValue：defaultValue仅在组件首次挂载时生效，如果后续受控值更新逻辑异常，组件会持续读取初始默认的今日值。同时检查全局配置的默认日期规则，是否覆盖了选中值的渲染逻辑。
• 校验选中值是否落在可选范围内
  如果配置了disabledDate、minDate、maxDate规则，确认选中的目标时间没有落在禁用/可选范围外，值被组件判定为无效时，也会回退展示默认今日日期。

修复参考代码（React受控场景） #

错误写法（状态未同步）：

const [selectedTime, setSelectedTime] = useState(null)
<DatePicker
  value={selectedTime}
  onChange={(val) => {
    // 仅打印值，未同步更新绑定状态
    console.log('选中时间', val)
  }}
/>

正确写法：

const [selectedTime, setSelectedTime] = useState(null)
<DatePicker
  value={selectedTime}
  onChange={(val) => {
    // 选中后正确同步状态，保证组件能拿到最新的选中值
    setSelectedTime(val)
  }}
/>

排查技巧：直接在组件渲染行打印当前绑定的选中值，确认每次选择后绑定值确实更新为目标时间、格式符合组件要求，先排除状态层问题，再排查组件配置冲突即可。

内容的提问来源于stack exchange，提问作者Yash porwal