Ant Design - Modal with Datepicker (form) - reactjs

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>
</>
);
}