En el formulario tengo un date-picker . Desde el date-picker el usuario selecciona la fecha de nacimiento. Quiero arrojar un error, si la edad es inferior a cinco años a partir de la fecha actual. Supongamos que el usuario selecciona el año 2015, entonces debería arrojar un error.
<div class="input-group date" data-provide="datepicker"> <input {...register("dob", { required: true, })} type="date" id="birthday" min="1899-01-01" max="2000-13-13" class="form-control" onClick={set} /> {errors?.dob?.type === "required" && ( <p>This field is required</p> )} <div class="input-group-addon"> <span class="glyphicon glyphicon-th"></span> </div> </div>Debe definir una función de validate personalizada para verificar la fecha seleccionada y pasarla a la sección de register .
Un ejemplo mínimo y básico:
const validateDate = (value) => { const selected = new Date(value).getFullYear(); const now = new Date().getFullYear(); return now - selected >= 5; }; ... <input {...register("dob", { required: true, validate: validateDate })} type="date" id="birthday" min="1899-01-01" max="2000-13-13" class="form-control" onClick={set} /> {errors?.dob?.type === "required" && ( <p>This field is required</p> )} {errors?.dob?.type === "validate" && <p>Invalid date</p>}Entonces, según sus códigos, esto es lo que debe hacer:
const { register, handleSubmit, formState: { errors }, watch, setError } = useForm(); const onSubmit = (data) => console.log(data); useEffect(() => { const db = watch("dob"); if (db) { const dbDate = new Date(db).getFullYear(); const currentDate = new Date().getFullYear(); const age = currentDate - dbDate; if (age < 5) { setError("dob", { type: "too young", message: "Sorry bro! you're too young to use this ;)" }); } } }, [watch("dob")]); y luego usa el error donde quieras:
{errors?.dob?.type === "too young" && ( <p style={{ color: "red" }}>{errors.dob.message}</p> )}aquí hay una demostración funcional para mostrar cómo se ve: https://codesandbox.io/s/funny-surf-d4gtt?file=/src/App.js:2336-2453