En mi sitio, el usuario tiene la oportunidad de seleccionar el rango de fecha y hora. Implemento esto usando DatePicker de la biblioteca react-datepicker.

Configuré el rango de fechas de tal manera que la fecha de finalización no podía ser menor que la fecha de inicio (lo cual es bastante lógico). Es decir, para la fecha de finalización, el usuario puede seleccionar fechas solo después de la fecha de inicio (o de ella misma). Funciona.

Pero tengo problemas para configurar exactamente la misma funcionalidad a lo largo del tiempo. Esto se complica por el hecho de que necesito establecer el rango de tiempo en segundos.

Así que explicaré con un ejemplo lo que necesito: si el usuario ha seleccionado una fecha y hora de inicio de 11/06/2022 12:20:20, entonces la fecha de finalización debe comenzar a las 12:20:20.

 () => { const [startDate, setStartDate] = useState(new Date()); const [endDate, setEndDate] = useState(new Date()); return ( <> <DatePicker selected={startDate} onChange={(date) => setStartDate(date)} showTimeSelect timeFormat="HH:mm:ss" timeIntervals={1} isClearable timeCaption="Time" dateFormat="dd/MM/yyyy HH:mm:ss" selectsStart startDate={startDate} endDate={endDate} /> <DatePicker selected={endDate} onChange={(date) => setEndDate(date)} showTimeSelect isClearable timeFormat="HH:mm:ss" timeIntervals={1} timeCaption="time" dateFormat="dd/MM/yyyy HH:mm:ss" selectsEnd startDate={startDate} endDate={endDate} minDate={startDate} /> </> ); };