how to get antd datePicker value in format after submission

Question

i build a form with Ant design,there is a datepicker input and i need to select date in a specific date format but when i press submit the date send without any format. how can i get the date on format after submit the form data

      import { Button, Form, Input, DatePicker } from 'antd';
        const App = () => {
          const onFinish = (value) => {
             console.log(value);
           };
       return (
          <Form name="form_item_path" layout="vertical" onFinish={onFinish}>
             <Form.Item name="firstName" label="First Name">
                <Input />
             </Form.Item>
          <Form.Item name="start-date">
            <DatePicker className='input w-full' format="YYYY-MM-DD HH:mm:ss"/>
          </Form.Item>
          <Button type="primary" htmlType="submit">
             Submit
          </Button>
       </Form>
      );
    };
    export default App;

Answer 1

Check the following example

you need to convert it to required format using

startdate: value["start-date"].format("YYYY-MM-DD HH:mm:ss")

App.jsx

import { Button, Form, Input, DatePicker } from "antd";
import "./index.css";
import "antd/dist/antd.css";
const App = () => {

  const onFinish = (value) => {
    let user = {
      firstname: value.firstName,
      startdate: value["start-date"].format("YYYY-MM-DD HH:mm:ss")  //Add your required date format here
    };
    console.log("Date in proper format", user);
  };

  return (
    <Form name="form_item_path" layout="vertical" onFinish={onFinish}>
      <Form.Item name="firstName" label="First Name">
        <Input />
      </Form.Item>
      <Form.Item name="start-date">
        <DatePicker className="input w-full" format="YYYY-MM-DD HH:mm:ss" />
      </Form.Item>
      <Button type="primary" htmlType="submit">
        Submit
      </Button>
    </Form>
  );
};
export default App;

Output: