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

Question

I'm using Ant-Design for my form. I have a RangePicker element within a form inside a modal.

Range Picker inside Modal

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

Basically I want to set RangePicker start and end values programmatically before Modal is set to visible. To achieve that, I set the value property to dateRange using react hook. When I use a RangePicker without a Form element then it works...

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}/>
...

However I want to validate RangePicker using a Form. When I put my RangePicker element inside a Form, the start and end values are never set...

<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>

So my question: Is it possible and how to set the RangePicker start/end values using a form?

Answer 1

Check the following code, i have used initialValues property of <Form> to set initial range picker date value in DD/MM/YYYY format

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