title: One second time interval
body: <p>In one of the filter options on my site, the user can select a date range and a time range. I have no problem with the date. But over time there is a question.</p>
  <p>I am using the DatePicker from react-datepicker.
  To display the time, I use the format &quot;HH:mm:ss&quot; and added parameter timeIntervals={1}.
  Accordingly, the user can select the time with a frequency of one minute.</p>
  <p><a href="https://i.stack.imgur.com/pE6Cn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pE6Cn.png" alt="enter image description here" /></a></p>
  <p>However, not in vain are the seconds nearby.
  And I would like to allow the user to select the time for each second. as below</p>
  <p><a href="https://i.stack.imgur.com/w8P0E.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/w8P0E.png" alt="enter image description here" /></a></p>
  <p>There are no ready-made solutions in this library. And I could not find solutions on the Internet and any information in the documentation. Perhaps you can help me.</p>
  <p>Below is  my code</p>
  <pre><code>    export default function FilterDateTime({ isExpanded, setIsExpanded }) {
    const [startDate, setStartDate] = useState(new Date());
    const [endDate, setEndDate] = useState(new Date());
    
    const filterPassedTime = (time) =&gt; {
    const selectedDate = new Date(time);
    return selectedDate.getTime() &gt; startDate.getTime();
    };
  
  
    return (
      &lt;ArrowDropdown
          isExpanded={isExpanded}
          setIsExpanded={setIsExpanded}
          title=&quot;Date and Time range&quot;
          onClick={() =&gt; setIsExpanded(!isExpanded)}&gt;
                    &lt;&gt;
      &lt;DatePicker
  
        selected={startDate}
        onChange={(date) =&gt; setStartDate(date)}
        showTimeSelect
        timeFormat=&quot;HH:mm:ss&quot;
        timeIntervals={1}
        timeCaption=&quot;Time&quot;
        dateFormat=&quot;dd/MM/yyyy         HH:mm:ss&quot;
        calendarStartDay={1}
        onKeyDown={(e) =&gt; {e.preventDefault();}}
        selectsStart
        startDate={startDate}
        endDate={endDate}
      /&gt;
      
      &lt;DatePicker
        selected={endDate}
        onChange={(date) =&gt; setEndDate(date)}
        showTimeSelect
        timeFormat=&quot;HH:mm:ss&quot;
        timeIntervals={1}
        timeCaption=&quot;time&quot;
        dateFormat=&quot;dd/MM/yyyy         HH:mm:ss&quot;
        calendarStartDay={1}
        onKeyDown={(e) =&gt; {e.preventDefault();}}
        selectsEnd
        startDate={startDate}
        endDate={endDate}
        minDate={startDate}
        filterTime={filterPassedTime}
      /&gt;
      &lt;/&gt;
  
      &lt;/ArrowDropdown&gt;
    );
  }
  </code></pre>
  <p>P.S. Since it is possible that this feature cannot be done. I can allow the user to enter seconds on their own (at the moment I have the input completely closed). But given the factor that a second in the end date cannot be less than a second in the start date.</p>