问两个从属日期选择器，其中开始日期永远不能大于结束日期

EN

import React, { useState } from "react";
import { useForm } from "react-hook-form";
import DatePicker, { setHours } from "react-datepicker";
import Moment from "react-moment";
import {
  Row,
  Col,
  Card,
  CardHeader,
  CardBody,
  Form,
  FormGroup,
  Label,
  Input,
  Button
} from "reactstrap";

const Insights = props => {
  const [startDate, setStartDate] = useState();
  const [endDate, setEndDate] = useState();
  const [endMinDate, setEndMinDate] = useState(new Date());
  const [endMinTime, setEndMinTime] = useState(new Date());

  const GetSearchForm = () => {
    const { register, handleSubmit, watch } = useForm();

    const timePickerStyle = { width: 96, important: "true" };

    const onSearch = data => {
      console.log(data);
      console.log(startDate);
    };

    const onDateStartChange = date => {
      setStartDate(date);
      setEndMinDate(date);
      setEndMinTime(date);
      alert(date);
    };

    const onDateEndChange = date => {
      setEndDate(date);
    };

    return (
      <Form onSubmit={handleSubmit(onSearch)}>
        <Row>
          <Col>
            <FormGroup>
              <Label for="exampleEmail">Account Id</Label>
              <Input
                type="number"
                name="account"
                id="account"
                placeholder="AccountId"
                innerRef={register}
              />
            </FormGroup>
          </Col>
          <Col>
            <FormGroup>
              <Label for="examplePassword">Email</Label>
              <Input
                type="email"
                name="email"
                id="email"
                placeholder="Email"
                innerRef={register}
              />
            </FormGroup>
          </Col>

          <Col>
            <FormGroup>
              <Label for="exampleEmail">xPage Id</Label>
              <Input
                type="number"
                name="xpageid"
                id="xpage"
                placeholder="xPage Id"
                innerRef={register}
              />
            </FormGroup>
          </Col>
          <Col>
            <FormGroup>
              <Label for="examplePassword">Content Devider Id</Label>
              <Input
                type="number"
                name="contentdevider"
                id="contentdeviderid"
                placeholder="Content Devider Id"
                innerRef={register}
              />
            </FormGroup>
          </Col>
          <Col>
            <FormGroup>
              <Label for="examplePassword">Custom Page Id</Label>
              <Input
                type="number"
                name="custompage"
                id="custompageid"
                placeholder="Custom Page Id"
                innerRef={register}
              />
            </FormGroup>
          </Col>
          <Col>
            <FormGroup>
              <Label for="examplePassword">Service</Label>
              <Input
                type="text"
                name="servicename"
                id="servicename"
                placeholder="Custom Page Id"
                innerRef={register}
              />
            </FormGroup>
          </Col>
        </Row>

        <Row>
          <Col xs="4">
            <FormGroup>
              <Label for="exampleEmail">Start</Label>
              <DatePicker
                isClearable
                innerRef={register}
                name="datetimestart"
                className={"form-control"}
                selected={startDate}
                onChange={date => onDateStartChange(date)}
                showTimeSelect
                timeFormat="HH:mm"
                timeIntervals={15}
                timeCaption="time"
                dateFormat="dd-MM-yyyy H:mm"
              />
            </FormGroup>
          </Col>
          <Col xs="4">
            <FormGroup>
              <Label for="exampleEmail">End</Label>
              <DatePicker
                isClearable
                innerRef={register}
                name="datetimeend"
                className={"form-control"}
                selected={endDate}
                onChange={date => onDateEndChange(date)}
                showTimeSelect
                timeFormat="HH:mm"
                timeIntervals={15}
                timeCaption="time"
                dateFormat="dd-MM-yyyy H:mm"
                maxDate={startDate}
                minTime={endMinDate}
                maxTime={startDate}
              />
            </FormGroup>
          </Col>
        </Row>

        <Button>Submit</Button>
      </Form>
    );
  };

  return (
    <Row>
      <Col xs="12" lg="12">
        <Card>
          <CardHeader>
            <i className="fa fa-align-justify"></i> Insights
          </CardHeader>
          <CardBody>
            <GetSearchForm></GetSearchForm>
            <div>
              startDate:
              {startDate == null ? "" : startDate.toString()}
            </div>
            <div>endDate:{endDate == null ? "" : endDate.toString()}</div>
          </CardBody>
        </Card>
      </Col>
    </Row>
  );
};

export default Insights;