Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

236
Visualizações
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 Respostas
Responde à pergunta

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda