react集合antd实现选择的开始和结束时间范围为一周内

借鉴Antd日期选择器实现开始时间和结束时间无论怎么去选都是一周内。
参考链接：https://ant.design/components/date-picker-cn/

需求：因超过一周的数据量过大会导致接口返回异常，需处理传参时间为最多一周内
用户可以选择任意时间为开始/结束时间，但是时间范围为一周内

结合Antd提及的日期选择框的DatePicker两个小框，因为antd中的RangePicker是连框，校验起来也可以根据rules提示信息但是体验不是很好，所以修改时间为DatePicker
实现效果如下： 开始时间和结束时间无论怎么去选都是一周内

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Form, DatePicker, Button } from "antd";

class TimeRelatedForm extends React.Component {
  state = {
    startValue: null,
    endValue: null,
    endOpen: false
  };

  disabledStartDate = startValue => {
    const { endValue } = this.state;
    if (!startValue || !endValue) {
      return false;
    }
    return (
      startValue.valueOf() < endValue.valueOf() - 604800000 ||
      startValue.valueOf() > endValue.valueOf()
    );
  };

  disabledEndDate = endValue => {
    const { startValue } = this.state;
    if (!endValue || !startValue) {
      return false;
    }
    return (
      endValue.valueOf() > startValue.valueOf() + 604800000 ||
      endValue.valueOf() < startValue.valueOf()
    );
  };

  onEndChange = value => {
    this.onChange("endValue", value);
  };

  handleEndOpenChange = open => {
    this.setState({ endOpen: open });
  };

  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFields((err, fieldsValue) => {
      if (err) {
        return;
      }

      // Should format date value before submit.
      const values = {
        ...fieldsValue,
        startTime: fieldsValue["date-time-picker"].format(
          "YYYY-MM-DD HH:mm:ss"
        ),
        endTime: fieldsValue["date-time-picker2"].format("YYYY-MM-DD HH:mm:ss")
      };
      console.log("Received values of form: ", values);
    });
  };

  onStartChange = value => {
    this.onChange("startValue", value);
  };

  onChange = (field, value) => {
    this.setState({
      [field]: value
    });
  };

  handleStartOpenChange = open => {
    if (!open) {
      this.setState({ endOpen: true });
    }
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    const { startValue, endValue, endOpen } = this.state;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      }
    };
    const config = {
      rules: [{ required: true, message: "Please select time!" }]
    };

    const config1 = {
      rules: [{ required: true, message: "Please select time!" }]
    };

    return (
      <Form {...formItemLayout} onSubmit={this.handleSubmit}>
        <Form.Item label="DatePicker[showTime]">
          {getFieldDecorator("date-time-picker", config)(
            <DatePicker
              disabledDate={this.disabledStartDate}
              showTime
              format="YYYY-MM-DD HH:mm:ss"
              value={startValue}
              placeholder="Start"
              onChange={this.onStartChange}
              onOpenChange={this.handleStartOpenChange}
            />
          )}

          {getFieldDecorator("date-time-picker2", config1)(
            <DatePicker
              disabledDate={this.disabledEndDate}
              value={endValue}
              placeholder="End"
              onChange={this.onEndChange}
              open={endOpen}
              onOpenChange={this.handleEndOpenChange}
              showTime
              format="YYYY-MM-DD HH:mm:ss"
            />
          )}
        </Form.Item>

        <Form.Item
          wrapperCol={{
            xs: { span: 24, offset: 0 },
            sm: { span: 16, offset: 8 }
          }}
        >
          <Button type="primary" htmlType="submit">
            Submit
          </Button>
        </Form.Item>
      </Form>
    );
  }
}

const WrappedTimeRelatedForm = Form.create({ name: "time_related_controls" })(
  TimeRelatedForm
);

ReactDOM.render(
  <WrappedTimeRelatedForm />,
  document.getElementById("container")
);