Ant Design 表单日期时间字符串初始化与Moment.js应用实践

1. 问题背景与分析

在react前端应用中，与后端api交互获取数据是常见场景。当后端返回日期（如"yyyy-mm-dd"）和时间（如"hh:mm:ss"）字段时，它们通常是字符串格式。然而，ant design的datepicker和timepicker组件在接收初始值时，并不直接支持字符串。它们期望的是特定的日期时间对象，在ant design v4及之前版本中是moment对象，而在ant design v5及更高版本中则推荐使用dayjs对象。

如果直接将字符串传递给这些组件的initialValues属性，会导致类似于date.format is not a function或date.clone is not a function的错误，因为组件内部会尝试调用这些对象特有的方法进行格式化或克隆操作，而字符串并不具备这些方法。

2. 解决方案：使用Moment.js进行数据转换与动态赋值

解决此问题的关键在于两步：

1. 数据类型转换：使用moment.js（或dayjs）库将后端返回的日期和时间字符串解析成对应的moment对象。
2. 动态表单赋值：利用Ant Design Form组件提供的useForm Hook和form.setFieldsValue方法，在数据加载完成后动态地设置表单字段的值。这是因为initialValues适用于静态或组件首次渲染时的值，而对于异步获取的数据，我们需要在数据可用时手动更新表单。

2.1 Moment.js解析日期和时间字符串

moment.js库提供了强大的日期时间解析能力。

• 解析日期字符串：对于形如"YYYY-MM-DD"的日期字符串，moment可以直接识别并解析：

  import moment from 'moment';
  const dateString = "2023-12-05";
  const momentDate = moment(dateString); // 得到一个moment对象

  登录后复制

• 解析时间字符串：对于形如"HH:mm:ss"的时间字符串，moment解析时需要提供一个格式字符串作为第二个参数，以确保正确解析。这是因为仅有时间信息无法构成一个完整的日期时间点，moment需要明确知道其格式。

  import moment from 'moment';
  const timeString = "10:23:00";
  const momentTime = moment(timeString, "HH:mm"); // 注意：虽然字符串有秒，但AntD TimePicker通常只关心小时和分钟，所以格式可以匹配到"HH:mm"。如果需要精确到秒，可以写"HH:mm:ss"。

  登录后复制

  这里，moment(timeString, "HH:mm")会创建一个今天的日期，时间部分设置为timeString指定的值。

  

  v0.dev

  Vercel推出的AI生成式UI工具，通过文本描述生成UI组件代码

  232

  查看详情

2.2 动态设置表单值

当从后端获取到数据后，我们不能直接修改initialValues。正确的做法是使用Form.useForm Hook获取表单实例，然后通过form.setFieldsValue()方法来更新表单字段的值。这个过程通常在useEffect Hook中完成，以模拟数据加载完成后的操作。

完整示例代码：

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

export function Playground() {
  // 1. 使用 Form.useForm() 获取表单实例
  const [form] = Form.useForm();

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

    // 2. 使用 form.setFieldsValue() 设置表单值
    form.setFieldsValue({
      ...response, // 复制其他字段的值
      date: moment(response.date), // 将日期字符串转换为 moment 对象
      time: moment(response.time, "HH:mm"), // 将时间字符串转换为 moment 对象，并指定格式
    });
  }, [form]); // 依赖项为 form 实例，确保只在 form 实例准备好后执行

  return (
    <Form form={form}> {/* 将表单实例绑定到 Form 组件 */}
      <Form.Item name='title' label="标题">
        <Input placeholder='请输入标题' />
      </Form.Item>
      <Form.Item name='date' label="日期">
        <DatePicker format={"DD/MM/YYYY"} placeholder='选择日期' />
      </Form.Item>
      <Form.Item name='time' label="时间">
        <TimePicker format={"HH:mm"} placeholder='选择时间' />
      </Form.Item>
    </Form>
  );
}

export default Playground;

代码解析：

• const [form] = Form.useForm();：这是获取Ant Design表单控制实例的标准方式。
• useEffect(() => { ... }, [form]);：useEffect用于处理副作用，例如数据获取和表单初始化。这里的[form]作为依赖项，确保在form实例可用时执行内部逻辑。
• form.setFieldsValue(...)：这个方法用于更新表单中指定字段的值。我们将后端返回的原始数据解构，然后覆盖date和time字段，将它们的字符串值转换为moment对象。
• DatePicker和TimePicker的format属性定义了组件显示时的格式，这与moment解析时的格式是独立的，但通常建议保持一致或根据UI需求调整。

3. 注意事项

• Ant Design版本兼容性：
  • Ant Design v4及以下：默认使用moment.js，因此上述方案直接适用。
  • Ant Design v5及以上：官方推荐使用dayjs代替moment.js，因为它体积更小。如果你的项目使用AntD v5+，请将代码中的moment替换为dayjs，并确保安装dayjs库。dayjs的API与moment非常相似，转换过程基本一致。例如：dayjs(response.date)和dayjs(response.time, "HH:mm")。
• 格式匹配：确保moment（或dayjs）解析时间字符串时提供的格式（如"HH:mm"）与实际字符串的格式相匹配，或者至少能正确解析出你所需的部分。
• 错误处理：在实际项目中，从后端获取数据时应考虑网络请求失败、数据格式不正确等情况，并添加相应的错误处理逻辑。
• 用户体验：在数据加载过程中，可以考虑显示加载状态（如Spin组件），提升用户体验。
• 表单提交：当用户提交表单时，DatePicker和TimePicker会返回moment（或dayjs）对象。在将数据发送回后端之前，你可能需要再次将这些对象转换回后端期望的字符串格式（例如，使用value.format('YYYY-MM-DD')或value.format('HH:mm:ss')）。

4. 总结

正确处理Ant Design DatePicker和TimePicker的初始值，特别是当数据来源于后端字符串时，是前端开发中的常见需求。通过理解组件对数据类型的要求，并结合moment.js（或dayjs）进行类型转换，再配合Form.useForm和form.setFieldsValue进行动态赋值，可以优雅地解决这一问题，确保表单组件的正常功能和用户体验。

以上就是Ant Design 表单日期时间字符串初始化与Moment.js应用实践的详细内容，更多请关注php中文网其它相关文章！