title: react-datepicker select time range for single day
body: <p>I am using react-datepicker to build a booking system component. Users can select a day and select a start time and end time (both start and end time can only be in the same day).</p>
  <p>I would like to show only one datepicker and then two timepicker, but only manage to get two full components (date+time).</p>
  <p>My code:</p>
  <pre><code>const StartTime () =&gt; {
    const [startDate, setStartDate] = useState(new Date());
    return (
      &lt;DatePicker
        selected={startDate}
        onChange={date =&gt; setStartDate(date)}
        showTimeSelect
        timeFormat=&quot;HH:mm&quot;
        timeIntervals={15}
        timeCaption=&quot;time&quot;
        dateFormat=&quot;MMMM d, yyyy h:mm aa&quot;
      /&gt;
    );
  };
  
  const EndTime () =&gt; {
    const [endDate, setEndDate] = useState(new Date());
    return (
      &lt;DatePicker
        selected={endDate}
        onChange={date =&gt; setEndDate(date)}
        showTimeSelect
        timeFormat=&quot;HH:mm&quot;
        timeIntervals={15}
        timeCaption=&quot;time&quot;
        dateFormat=&quot;MMMM d, yyyy h:mm aa&quot;
      /&gt;
    );
  };
  </code></pre>