Quiero seleccionar un rango de tiempo con react-datepicker , y también usar react-hook-form para validar cuando onBlur sin input , aquí está mi código:
<Controller control={control} name='time' rules={{ required: true }} render={({ field: { value, onChange, onBlur } }) => ( <Datepicker dateFormat='yyyy/MM/dd h:mm aa' onChange={onChange} onBlur={onBlur} selected={value} showTimeSelect /> )} />Puedo elegir una fecha y hora en un selector y hacer la validación ahora mismo, funciona, pero si quiero elegir dos fechas y horas en un selector, ¿qué debo hacer? ¿Cómo hago que react-hook-form identifique la hora de inicio o finalización en el selector? ¿Es posible?
Tengo exactamente el mismo problema la semana pasada, aquí está la solución...
Solo necesita pasar ( al menos ) el valor a la " Función del controlador ", lo logra usando solo el objeto de campo.
En cualquier caso, cuando el componente DatePicker se usa para un rango de fechas, requerirá un tipo de datos de vector de dos posiciones, donde las fechas de inicio y finalización se almacenan como una cadena. Pero si intenta manipular y controlar este componente a través de la función onChange que proviene de la forma de gancho de reack, lo arruinará todo, porque está hecho para un flujo de datos uno a uno. Luego, los procesos se realizan por separado, pero el vector aún se envía al controlador. ¡Aquí está el código!
const [dateRange, setDateRange] = useState([null, null]); const [startDate, endDate] = dateRange; <Controller //is a prop that we get back from the useForm Hook and pass into the input. control={control} //is how React Hook Form tracks the value of an input internally. name={name} //render is the most important prop; we pass a render function here. render={({ //The function has three keys: field , fieldState, and formState. field, // The field object exports two things (among others): value and onChange }) => ( <> <DatePicker selectsRange={true} startDate={startDate} endDate={endDate} onChange={(e) => { setDateRange(e); field.onChange(e); }} isClearable={true} className="form-control" /> </> )} rules={{ required: `The ${label} field is required`, }} />