Dado que una persona no puede morir antes de nacer, tiene sentido tener un mínimo y un máximo para estas fechas. Pero no puedo obtener el valor de la primera entrada, aparece un error de que el valor es nulo. (Usando el paquete react-hooks-form, no creas que esta información es importante pero nunca se sabe)
<div className="form-section"> <label>Date of birth <span style={{ color: "red " }}>*</span>:</label> {errors.Name && errors.Name.type === "required" && ( <span style={{ color: "red " }}>Required!</span> )} <input max={moment().format("YYYY-MM-DD")} type="date" name="BirthDate" id="BD" ref={register({ required: true })} /> </div> <div className="form-section"> <label>Date of death <span style={{ color: "red " }}>*</span>:</label> {errors.Name && errors.Name.type === "required" && ( <span style={{ color: "red " }}>Required!</span> )} <input min={document.getElementById("BD").value} max={moment().format("YYYY-MM-DD")} type="date" name="DateOfDeath" ref={register({ required: true })} /> </div>¡Gracias por la ayuda! Puedo agregar información adicional si es necesario.
Como el código en las preguntas contiene una estructura incompleta, estoy formateando aquí según mi entendimiento. Si puede proporcionar un ejemplo de trabajo en codesandbox, será de gran ayuda.
Necesitas usar el reloj desde la forma de gancho de reacción.
const MyComponent = () => { const { register, errors, watch, } = useForm(); const dateOfBirth = watch('BirthDate', new Date()); // Added new date to default to Today in case if DOB is not selected. return ( <div className="form-section"> <label>Date of birth <span style={{ color: "red " }}>*</span>:</label> {errors.Name && errors.Name.type === "required" && ( <span style={{ color: "red " }}>Required!</span> )} <input max={moment().format("YYYY-MM-DD")} type="date" name="BirthDate" id="BD" ref={register({ required: true })} /> </div> <div className="form-section"> <label>Date of death <span style={{ color: "red " }}>*</span>:</label> {errors.Name && errors.Name.type === "required" && ( <span style={{ color: "red " }}>Required!</span> )} <input min={dateOfBirth} max={moment().format("YYYY-MM-DD")} type="date" name="DateOfDeath" ref={register({ required: true })} /> </div>) }