En una de las opciones de filtro en mi sitio, el usuario puede seleccionar un rango de fechas y un rango de tiempo. No tengo problema con la fecha. Pero con el tiempo hay una pregunta.
Estoy usando DatePicker de react-datepicker. Para mostrar la hora, utilizo el formato "HH:mm:ss" y agregué el parámetro timeIntervals={1}. En consecuencia, el usuario puede seleccionar el tiempo con una frecuencia de un minuto.
Sin embargo, no en vano los segundos están cerca. Y me gustaría permitir que el usuario seleccione el tiempo para cada segundo. como a continuación
No hay soluciones preparadas en esta biblioteca. Y no pude encontrar soluciones en Internet y ninguna información en la documentación. Quizás tu puedas ayudarme.
A continuación se muestra mi código
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> ); }PD Dado que es posible que esta función no se pueda realizar. Puedo permitir que el usuario ingrese segundos por su cuenta (de momento tengo la entrada completamente cerrada). Pero dado el factor de que un segundo en la fecha de finalización no puede ser inferior a un segundo en la fecha de inicio.
Actualmente, esta función no es compatible con react-datepicker, pero puedo ver que la función ya está desarrollada pero está bajo revisión de relaciones públicas, puede llevar algún tiempo implementarla.
Aquí está el github pr para el mismo