Ant Design - Modal with Datepicker (form)

Question

Reproduction link

codesandbox example

What is actually happening?

I enter the property name in the <Form.Item of the Datepicker and the application simply returns an error.

What is expected?

I want to work with dates in Modal, being able to retrieve a value from an object and send a Datepicker change to the form, as with text inputs

I intend to work with this object

{
  name: "Wagner Fillio",
  gender: "male",
  birthday: "2022-02-20"
}

But I get the object below

import { useState } from "react";
import { Modal, Row, Col, Form, Input, DatePicker, Select, Button } from "antd";

import "./style.css";

export function Test() {
  const [form] = Form.useForm();
  const [isModalVisible, setIsModalVisible] = useState < boolean > false;

  const initialValues = {
    name: "Wagner Fillio",
    gender: "male",
    birthday: "2022-02-20",
  };

  const showModal = () => {
    setIsModalVisible(true);
  };

  const handleOk = () => {
    setIsModalVisible(false);
  };

  const handleCancel = () => {
    form.resetFields();
    setIsModalVisible(false);
  };

  const onFinish = async () => {
    try {
      const values = await form.validateFields();
      console.log("Success:", values);

      // Intended object
      // {{name: 'Wagner Fillio', gender: 'male', birthday: '2022-02-20'}}
    } catch (err) {
      console.log(err);
    }
  };

  return (
    <>
      <Button type="primary" onClick={showModal}>
        Open Modal
      </Button>
      <Modal
        width={300}
        title="User"
        visible={isModalVisible}
        onOk={handleOk}
        onCancel={handleCancel}
        footer={[
          <Button key="back" onClick={handleCancel}>
            Cancel
          </Button>,
          <Button key="submit" type="primary" onClick={onFinish}>
            Submit
          </Button>,
        ]}
      >
        <Form
          form={form}
          name="form-name"
          layout="vertical"
          initialValues={initialValues}
          onFinish={onFinish}
        >
          <Form.Item name="name" label="Name">
            <Input placeholder="Name" title="Name" />
          </Form.Item>
          <Form.Item name="gender" label="Gender">
            <Select>
              <Select.Option value="female">Female</Select.Option>
              <Select.Option value="male">Male</Select.Option>
            </Select>
          </Form.Item>
          <Form.Item label="Birthday">
            <DatePicker />
          </Form.Item>
        </Form>
      </Modal>
    </>
  );
}


<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

Add name property for Form.Item and in OnFinish() function convert the date into required format

import { useState } from "react";
import { Modal, Row, Col, Form, Input, DatePicker, Select, Button } from "antd";
import "./styles.css";

export default function App() {
  const [form] = Form.useForm();
  const [isModalVisible, setIsModalVisible] = useState<boolean>(false);

  const initialValues = {
  name: "Wagner Fillio",
  gender: "male",
  birthday: "2022-02-20"
};

 const showModal = () => {
 setIsModalVisible(true);
};

 const handleOk = () => {
 setIsModalVisible(false);
};

 const handleCancel = () => {
  form.resetFields();
  setIsModalVisible(false);
};

const onFinish = async () => {
  try {
    const values = await form.validateFields();
    values.birthday = values['birthday'].format('YYYY-MM-DD')
    console.log("Success:", values);

  // Intended object
  // {{name: 'Wagner Fillio', gender: 'male', birthday: '2022-02-20'}}
} catch (err) {
  console.log(err);
}
};

return (
<>
  <Button type="primary" onClick={showModal}>
    Open Modal
  </Button>
  <Modal
    width={300}
    title="User"
    visible={isModalVisible}
    onOk={handleOk}
    onCancel={handleCancel}
    footer={[
      <Button key="back" onClick={handleCancel}>
        Cancel
      </Button>,
      <Button key="submit" type="primary" onClick={onFinish}>
        Submit
      </Button>
    ]}
  >
    <Form
      form={form}
      name="form-name"
      layout="vertical"
      initialValues={initialValues}
      onFinish={onFinish}
    >
      <Form.Item name="name" label="Name">
        <Input placeholder="Name" title="Name" />
      </Form.Item>
      <Form.Item name="gender" label="Gender">
        <Select>
          <Select.Option value="female">Female</Select.Option>
          <Select.Option value="male">Male</Select.Option>
        </Select>
      </Form.Item>
      <Form.Item name="birthday" label="Birthday">
        <DatePicker />
      </Form.Item>
    </Form>
  </Modal>
</>
);
}