如何将时间字符串转为Date对象适配AntD TimePicker初始值？

解决方案 #

1. 直接用moment转换初始值 #

AntD 4.x的日期/时间组件底层依赖moment.js，直接用moment把时间字符串转成moment对象即可：

首先安装moment依赖：

npm install moment

修改初始值代码：

import { Form, DatePicker, TimePicker, Input } from "antd";
import moment from "moment";

const initial_data = {
  title: "Title",
  date: moment("2023-12-05", "YYYY-MM-DD"),
  time: moment("10:23:00", "HH:mm:ss")
}

export function Playground() {
  return (
    <Form initialValues={initial_data} >
      <Form.Item name="title" >
        <Input placeholder="Title" />
      </Form.Item>
      <Form.Item name="date" >
        <DatePicker format="DD/MM/YYYY" placeholder="选择日期" />
      </Form.Item>
      <Form.Item name="time" >
        <TimePicker format="HH:mm" placeholder="选择时间" />
      </Form.Item>
    </Form>
  );
}

2. 在Form.Item中做转换 #

如果不想修改原始后端返回数据，可以在Form.Item里用normalize属性做转换：

<Form.Item 
  name="time"
  normalize={(value) => {
    if (typeof value === 'string') {
      return moment(value, 'HH:mm:ss');
    }
    return value;
  }}
>
  <TimePicker format="HH:mm" placeholder="选择时间" />
</Form.Item>

3. 兼容AntD 5.x版本（可选） #

如果后续升级到AntD 5.x，组件改为依赖Day.js，转换逻辑类似，只需把moment替换为dayjs：

import dayjs from "dayjs";

// 转换时间字符串示例
const timeObj = dayjs("10:23:00", "HH:mm:ss");

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