React TimePicker组件无法预填充已有时间值问题求助

问题核心 #

你的状态变量myStateVariableTime是"05:00PM"这类自定义格式，dayjs默认无法正确解析该格式，导致TimePicker无法识别并渲染这个时间值。

解决方案 #

需要明确指定dayjs的解析格式，确保将字符串时间正确转换为dayjs对象，同时统一value的类型为dayjs对象：

<LocalizationProvider dateAdapter={AdapterDayjs}>
  <TimePicker 
    label="Time"
    // 明确指定解析格式，让dayjs正确识别"05:00PM"
    value={myStateVariableTime 
      ? dayjs(myStateVariableTime, 'hh:mmA') 
      : dayjs('2024-09-27T16:00')}
    onChange={(newValue) => {
      // 保存时将dayjs对象转换为统一格式的字符串
      setMyStateVariableTime(newValue.format('hh:mmA'));
    }}
    // 设置TimePicker的显示格式，匹配需求样式
    format="hh:mm A"
  />
</LocalizationProvider>

关键说明 #

• 解析时间：使用dayjs(时间字符串, 格式)的方式，明确告知dayjs如何解析你的自定义时间格式，避免解析失败。
• 状态存储：在onChange中将dayjs对象转换为你需要的字符串格式（如'hh:mmA'），确保下次渲染时能正确解析回dayjs对象。
• 显示格式：通过format属性设置TimePicker的显示样式，和你的需求（如"4:00 PM"）保持一致。

内容的提问来源于stack exchange，提问作者Prasad Patel