Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

229
Views
One second time interval

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.

I am using the DatePicker from react-datepicker. To display the time, I use the format "HH:mm:ss" and added parameter timeIntervals={1}. Accordingly, the user can select the time with a frequency of one minute.

enter image description here

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

enter image description here

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.

Below is my code

    export default function FilterDateTime({ isExpanded, setIsExpanded }) {
  const [startDate, setStartDate] = useState(new Date());
  const [endDate, setEndDate] = useState(new Date());
  
  const filterPassedTime = (time) => {
  const selectedDate = new Date(time);
  return selectedDate.getTime() > startDate.getTime();
  };


  return (
    <ArrowDropdown
        isExpanded={isExpanded}
        setIsExpanded={setIsExpanded}
        title="Date and Time range"
        onClick={() => setIsExpanded(!isExpanded)}>
                  <>
    <DatePicker

      selected={startDate}
      onChange={(date) => setStartDate(date)}
      showTimeSelect
      timeFormat="HH:mm:ss"
      timeIntervals={1}
      timeCaption="Time"
      dateFormat="dd/MM/yyyy         HH:mm:ss"
      calendarStartDay={1}
      onKeyDown={(e) => {e.preventDefault();}}
      selectsStart
      startDate={startDate}
      endDate={endDate}
    />
    
    <DatePicker
      selected={endDate}
      onChange={(date) => setEndDate(date)}
      showTimeSelect
      timeFormat="HH:mm:ss"
      timeIntervals={1}
      timeCaption="time"
      dateFormat="dd/MM/yyyy         HH:mm:ss"
      calendarStartDay={1}
      onKeyDown={(e) => {e.preventDefault();}}
      selectsEnd
      startDate={startDate}
      endDate={endDate}
      minDate={startDate}
      filterTime={filterPassedTime}
    />
    </>

    </ArrowDropdown>
  );
}

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.

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

This feature is currently not supported by react-datepicker but I can see the feature is already developed but is under PR review , might take some time to roll out.

Here is the github pr for same

https://github.com/Hacker0x01/react-datepicker/pull/3214

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!