AntdV4 Form RangePicker 拆分

FormItemRangePicker.tsx

import React from 'react';
import { Button, DatePicker, Form, Input } from 'antd';
import moment from 'moment';

const DemoPage: React.FC = () => {
  const [form] = Form.useForm();
  const handleOk = (vals: any) => {
    console.log(vals);
  };
  return (
    <Form form={form} onFinish={handleOk}>
      <span>
        <Form.Item noStyle shouldUpdate>
          {inst => (
            <Form.Item
              label="Date"
              name="start_at"
              getValueProps={value => ({
                value: value && [
                  moment(Number(value)),
                  moment(Number(inst.getFieldValue('end_at'))),
                ],
              })}
              getValueFromEvent={values => {
                const [start, end] = values ?? [];
                inst.setFields([
                  { name: 'end_at', value: end && `${moment(end).endOf('day').valueOf()}` },
                ]);
                return start && `${moment(start).startOf('day').valueOf()}`;
              }}
            >
              <DatePicker.RangePicker />
            </Form.Item>
          )}
        </Form.Item>

        <Form.Item name="end_at" hidden>
          <Input />
        </Form.Item>
      </span>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
        <Button
          onClick={() => {
            form.setFields([
              { name: 'start_at', value: '1621611200000' },
              { name: 'end_at', value: '1621697600000' },
            ]);
          }}
        >
          set date
        </Button>
      </Form.Item>
    </Form>
  );
};

export default DemoPage;