Ant如何用表单编程地设置RangePicker值
Ant如何用表单编程地设置RangePicker值
提问于 2022-03-13 12:24:31
我正在使用Ant-为我的表单设计。我在模态内的表单中有一个RangePicker元素。
<Modal>
<Form>
<Form.Item>
<RangePicker onChange={(c) => setDateRange(c)} value={dateRange}/>
</Form.Item>
</Form>
</Modal>基本上，我希望在Modal设置为可见之前，以编程方式设置RangePicker开始值和结束值。为此，我使用react将value属性设置为dateRange。当我使用没有RangePicker 的表单元素时，它会工作.
const [dateRange, setDateRange] = useState([moment(), moment()])
const [modalVisible, setModalVisible] = useState(false);
const [form] = Form.useForm();
...
<Modal visible={modalVisible}>
<RangePicker onChange={(x) => setDateRange(x)} value={dateRange}/>
...但是，我想使用表单验证RangePicker。当我把我的RangePicker元素放在一个表单中时，开始值和结束值永远不会被设置.
<Modal visible={modalVisible}>
<Form form={form}>
<Form.Item name="range_picker" label="Date range" rules={[{required: true}]}
<RangePicker onChange={(x) => setDateRange(x)} value={dateRange}/>
</Form.Item>
</Form>
</Modal>因此，我的问题是:是否有可能以及如何使用表单设置RangePicker开始/结束值？
回答 2
Stack Overflow用户
回答已采纳
发布于 2022-03-14 05:57:16
检查以下代码，我使用了initialValues属性<Form>来设置DD/MM/YYYY格式的初始范围选择器日期值
Demo.js
import React from 'react';
import { Form, Modal, DatePicker } from 'antd';
import moment from 'moment';
import 'antd/dist/antd.css';
const Demo = () => {
const { RangePicker } = DatePicker;
const [form] = Form.useForm();
const modalVisible = true;
const dateFormat = 'DD/MM/YYYY';
return (
<Modal visible={modalVisible}>
<Form
form={form}
initialValues={{
range_picker: [
moment('01/01/2022', dateFormat),
moment('02/03/2022', dateFormat),
],
}}
>
<Form.Item
name="range_picker"
label="Date range"
rules={[{ required: true, message: 'Please select date' }]}
>
<RangePicker format={dateFormat} />
</Form.Item>
</Form>
</Modal>
);
};
export default DemoStack Overflow用户
发布于 2022-09-12 23:40:04
将这个defaultValue属性添加到范围时间选择器是对我有用的。
defaultValue={[moment("2022-09-12 13:00"), moment("2022-09-12 16:00")]}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71456732
复制相关文章
相似问题
腾讯云开发者
