react Ant Design form表单的用法，时间选择器，选择后分为两个时间字段

在使用 Ant Design 的 Form 组件时，可以通过 `Form.Item` 包裹子组件来实现表单项的布局和数据绑定。对于时间选择器，Ant Design 提供了 `DatePicker` 和 `TimePicker` 组件，可以方便地进行时间的选择和格式化。

如果需要将时间选择器的结果分为两个时间字段，可以使用 `moment` 库对时间进行解析和格式化。

以下是一个示例代码：

import { Form, DatePicker, TimePicker } from 'antd';
import moment from 'moment';

const DemoForm = () => {
  const [form] = Form.useForm();

  const onFinish = (values) => {
    console.log('Received values of form: ', values);
  };

  const onDatePickerChange = (date, dateString) => {
    form.setFieldsValue({
      startTime: moment(dateString + ' 00:00:00'),
      endTime: moment(dateString + ' 23:59:59'),
    });
  };

  return (
    <Form form={form} onFinish={onFinish}>
      <Form.Item name="date" label="选择日期">
        <DatePicker onChange={onDatePickerChange} />
      </Form.Item>
      <Form.Item name="startTime" label="开始时间">
        <TimePicker format="HH:mm:ss" />
      </Form.Item>
      <Form.Item name="endTime" label="结束时间">
        <TimePicker format="HH:mm:ss" />
      </Form.Item>
    </Form>
  );
};

在上述代码中，我们通过 `DatePicker` 组件的 `onChange` 事件来获取选中的日期，并使用 `moment` 将其解析为开始时间和结束时间。然后，我们分别将开始时间和结束时间绑定到了 `startTime` 和 `endTime` 表单项中。最后，我们可以在提交表单时获取这两个时间字段的值，进行进一步处理。