英文:
how to get antd datePicker value in format after submission
问题
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;
<details>
<summary>英文:</summary>
>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;
</details>
# 答案1
**得分**: 3
这是您要翻译的部分：
```javascript
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") //在这里添加您所需的日期格式
};
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;
请注意，我已经保留了代码中的引号和注释，没有翻译。
英文:
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
<!-- language: lang-js -->
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;
<!-- end snippet -->
Output:
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论