Я использую средство выбора даты и имею дату и время начала и окончания. Никогда не должно быть возможности выбрать меньшую дату / время в стартере. Таким образом, очевидным является установка MinDate и MinTime в окне выбора даты окончания. Однако DatePicker требует, чтобы вы установили MinTime и MaxTime. И я не хочу устанавливать что-либо в MaxTime. Любые указатели, как решить эту проблему?
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;