ant.design时间组件报错问题

因为这个时间组件其实要求输入的是moment数据类型所以如果出现了这个报错要将数据类型给转换一下，

先引入moment。（使用git指令

npm install moment

关键在于使用moment将你要传入的数据给转换一下。

let moment_data= moment(日期变量, 'YYYY-MM-DD')
//moment_data就是moment数据

如果要将moment数据转为字符串的话：

let   str=moment数据.format('YYYY-MM-DD');
//str就是转后的字符串

下面是一个示例：

import React from 'react';
import { Form, Input, DatePicker, Button } from 'antd';
import moment from 'moment';

const { RangePicker } = DatePicker;

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

  // 初始表单数据
  const initialValues = {
    username: 'John Doe',
    date: moment('2024-07-03', 'YYYY-MM-DD'),
    range: [moment('2024-07-01', 'YYYY-MM-DD'), moment('2024-07-31', 'YYYY-MM-DD')],
  };

  const onFinish = (values) => {
    // 将 moment 对象转换为字符串
    const formattedValues = {
      ...values,
      date: values.date ? values.date.format('YYYY-MM-DD') : null,
      range: values.range ? values.range.map(date => date.format('YYYY-MM-DD')) : null,
    };

    console.log('表单数据:', formattedValues);
  };

  return (
    <Form form={form} initialValues={initialValues} onFinish={onFinish}>
      <Form.Item
        label="用户名"
        name="username"
        rules={[{ required: true, message: '请输入用户名' }]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        label="日期"
        name="date"
        rules={[{ required: true, message: '请选择日期' }]}
      >
        <DatePicker />
      </Form.Item>
      <Form.Item
        label="日期范围"
        name="range"
        rules={[{ required: true, message: '请选择日期范围' }]}
      >
        <RangePicker />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          提交
        </Button>
      </Form.Item>
    </Form>
  );
};

export default DateFormExample;