处理Ant Design中日期和时间字符串的转换与表单初始化

问题背景：Ant Design日期时间组件的期望值类型

在使用Ant Design构建前端表单时，我们经常会遇到需要从后端获取数据并将其填充到表单字段中的场景。对于文本输入框（Input）等组件，直接将字符串值赋给它们通常没有问题。然而，当涉及到日期选择器（DatePicker）和时间选择器（TimePicker）时，直接传入后端返回的日期或时间字符串（例如 "YYYY-MM-DD" 或 "HH:mm:ss"）会导致组件抛出错误，如 date.format is not a function 或 date.clone is not a function。

这是因为Ant Design的日期和时间组件（在Ant Design v4及之前版本）内部依赖于moment.js库来处理日期时间对象。它们期望接收的是moment对象实例，而不是原始的字符串。当组件尝试对传入的字符串值调用format或clone等方法时，由于字符串不具备这些方法，便会引发运行时错误。

解决方案：利用 moment.js 进行数据转换

解决此问题的关键在于，在将数据传递给Ant Design的日期时间组件之前，将其从字符串格式转换为moment对象。

1. 引入 moment.js

首先，确保你的项目中已安装moment.js。如果尚未安装，可以通过npm或yarn进行安装：

npm install moment
# 或者
yarn add moment

然后在需要使用它的组件中导入：

import moment from "moment";

2. 转换日期字符串

对于形如 "YYYY-MM-DD" 的日期字符串，moment.js 可以直接解析并创建moment对象：

const dateString = "2023-12-05";
const momentDate = moment(dateString); // 转换为 moment 对象

3. 转换时间字符串

对于形如 "HH:mm:ss" 的时间字符串，moment.js 需要额外的格式参数来确保正确解析。这是因为时间字符串本身不包含日期信息，moment需要知道如何解释它：

const timeString = "10:23:00";
// 转换为 moment 对象，并指定输入格式
const momentTime = moment(timeString, "HH:mm:ss");
// 注意：如果后端只返回 "HH:mm"，则格式应为 "HH:mm"
// const momentTime = moment(timeString, "HH:mm");

请务必确保moment函数的第二个参数（即格式字符串）与你实际接收到的时间字符串的格式完全匹配。

动态设置表单值：Form.useForm 与 setFieldsValue

在实际应用中，表单的初始值通常是从后端异步获取的。Ant Design的Form组件提供了useForm Hook 和 setFieldsValue 方法，这使得在数据加载完成后动态设置表单字段的值变得非常方便。

1. 使用 Form.useForm

在函数组件内部调用 Form.useForm() 来获取表单实例：

import { Form } from "antd";
// ...
export function Playground() {
  const [form] = Form.useForm();
  // ...
}

2. 使用 useEffect 加载数据并设置值

结合 useEffect Hook，我们可以在组件挂载后（或依赖项变化时）模拟数据加载，并将转换后的moment对象通过form.setFieldsValue设置到表单中。

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

export function Playground() {
  const [form] = Form.useForm();

  useEffect(() => {
    // 模拟从后端获取数据
    const response = {
      title: "标题示例",
      date: "2023-12-05",
      time: "10:23:00",
    };

    // 转换日期和时间字符串为 moment 对象
    form.setFieldsValue({
      ...response, // 保留其他字段，如 title
      date: moment(response.date), // 转换日期
      time: moment(response.time, "HH:mm:ss"), // 转换时间，注意格式
    });
  }, [form]); // 依赖项数组包含 form 实例，确保在 form 准备好后执行

  return (
    <Form form={form}> {/* 将 form 实例传递给 Form 组件 */}
      <Form.Item name='title'>
        <Input placeholder='标题' />
      </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>
  );
}

export default Playground;

代码解释：

• const [form] = Form.useForm();：创建并获取表单控制实例。
• useEffect(() => { ... }, [form]);：在组件首次渲染后执行副作用，这里模拟异步数据获取。[form]作为依赖项，确保在form实例可用时执行。
• form.setFieldsValue(...)：使用此方法设置表单字段的值。
• moment(response.date)：将日期字符串转换为moment对象。
• moment(response.time, "HH:mm:ss")：将时间字符串转换为moment对象，并明确指定了输入格式为 "HH:mm:ss"。请注意，TimePicker的format属性（例如 "HH:mm"）定义的是组件显示时的格式，而moment函数第二个参数定义的是解析输入字符串时的格式。

注意事项与总结

1. Ant Design v5+ 的变化：从 Ant Design v5 开始，其日期时间组件的默认日期库已从 moment.js 切换为 dayjs。如果你正在使用或计划升级到 Ant Design v5 及更高版本，你需要将 moment 的相关操作替换为 dayjs。dayjs 的 API 与 moment 非常相似，转换起来相对容易：

   import dayjs from "dayjs";
   // ...
   form.setFieldsValue({
     ...response,
     date: dayjs(response.date),
     time: dayjs(response.time, "HH:mm:ss"),
   });

   登录后复制
2. 格式匹配：在将时间字符串转换为moment（或dayjs）对象时，务必确保 moment(timeString, formatString) 中的 formatString 与后端返回的时间字符串的实际格式完全一致。否则，解析可能会失败，导致组件显示为空或不正确的值。
3. 异步数据加载：当表单数据来自异步请求时，使用 useEffect 结合 form.setFieldsValue 是设置初始值的标准且推荐的做法。避免直接将异步数据作为 initialValues 属性传递给 Form 组件，因为 initialValues 仅在组件首次渲染时生效，后续数据更新不会自动反映。

通过以上方法，开发者可以有效地处理后端返回的日期和时间字符串，并将其正确地显示在Ant Design的日期和时间选择器组件中，从而提升用户体验和应用的健壮性。

以上就是处理Ant Design中日期和时间字符串的转换与表单初始化的详细内容，更多请关注php中文网其它相关文章！