React Ant Design - 如何使用 Form 以编程方式设置 RangePicker 值

Question

我正在为我的表单使用 Ant-Design。我在模态内的表单中有一个 RangePicker 元素。

Range Picker inside Modal

<Modal>
   <Form>
     <Form.Item>
       <RangePicker onChange={(c) => setDateRange(c)} value={dateRange}/>
     </Form.Item>
   </Form>
</Modal>

基本上我想在 Modal 设置为可见之前以编程方式设置 RangePicker 的开始和结束值。为此，我使用 react hook 将值属性设置为 dateRange。当我使用 RangePicker 而没有 Form 元素时，它可以工作...

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 start/end 值？

Answer 1

检查以下代码，我使用 <Form> 的 initialValues 属性以 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 Demo

React Ant Design - 如何使用 Form 以编程方式设置 RangePicker 值

React Ant Design - How to set RangePicker values programmatically with Form

reactjs

antd