On my site, the user has the opportunity to select the date-time range. I implement this using the DatePicker from the react-datepicker library.

I set up the date range in such a way that the end date could not be less than the start date (which is quite logical). That is, for the end date, the user can select dates only after the start date (or itself). It works.

But I have problems to set up exactly the same functionality over time. This is complicated by the fact that I need to set the time range up to seconds.

So I will explain with an example what I need: If the user has selected a start date and time of 11/06/2022 12:20:20, then the time in the end date must start from 12:20:20.

    () => {
  const [startDate, setStartDate] = useState(new Date());
  const [endDate, setEndDate] = useState(new Date());
  return (
  <>
    <DatePicker
      selected={startDate}
      onChange={(date) => setStartDate(date)}
      showTimeSelect
      timeFormat="HH:mm:ss"
      timeIntervals={1}
      isClearable
      timeCaption="Time"
      dateFormat="dd/MM/yyyy    HH:mm:ss"
      
      selectsStart
      startDate={startDate}
      endDate={endDate}
    />
    
    <DatePicker
      selected={endDate}
      onChange={(date) => setEndDate(date)}
      showTimeSelect
      isClearable
      timeFormat="HH:mm:ss"
      timeIntervals={1}
      timeCaption="time"
      dateFormat="dd/MM/yyyy    HH:mm:ss"
      
      selectsEnd
      startDate={startDate}
      endDate={endDate}
      minDate={startDate}
    />
    </>
  );
};