Agregué la validación yup en el selector de fecha, así que lo que está sucediendo ahora si hago clic en enviar dice que el campo es obligatorio ¡Fecha no válida! pero mi tarea necesita establecer una validación, como que el error se generará solo si la fecha es posterior a la fecha de hoy que he agregado en max y tampoco se agrega en ninguna cosa .required ("¡Requerido!") , Pero no estoy seguro de por qué es trabajando como se requiere! ¡campo que no necesito establecer como requerido!
const today = moment().format("YYYY-MM-DD"); const validationSchema = yup.object().shape({ date_of_birth: yup .date() .max(today, "DOB cannot be greater than today's date") .typeError("Invalid Date!") }); export default function MaterialUIPickers() { const IndivisualForm = useFormik({ initialValues: { date_of_birth: null }, enableReinitialize: true, validationSchema, onSubmit: (values) => { } }); const handleChangeDate = (date) => { IndivisualForm.setFieldValue( "date_of_birth", moment(date).format("YYYY-MM-DD") ); }; return ( <MuiPickersUtilsProvider utils={DateFnsUtils}> <Grid container justifyContent="space-around"> <KeyboardDatePicker disableToolbar variant="inline" format="MM/dd/yyyy" margin="normal" id="date-picker-inline" label="Date picker inline" value={IndivisualForm.values.date_of_birth} error={Boolean(IndivisualForm.errors.date_of_birth)} helperText={IndivisualForm.errors.date_of_birth} onChange={handleChangeDate} maxDate={today} KeyboardButtonProps={{ "aria-label": "change date" }} /> <Button color="primary" variant="contained" type="submit" onClick={IndivisualForm.handleSubmit} > Submit </Button> </Grid> </MuiPickersUtilsProvider> ); }¿No está seguro de por qué max debería funcionar aquí?
Idealmente cuando querías probar alguna comparación. Tienen método de prueba allí. Así que básicamente necesitas hacer esto:
const validationSchema = yup.object().shape({ date_of_birth: yup .date() .nullable() .notRequired() .test( "Is date greater", "DOB cannot be greater than today's date", (value) => { if (!value) return true; return moment(today).diff(value) > 0; } ) });Aquí hay una demostración en vivo de codesandbox: https://codesandbox.io/s/material-demo-forked-kbxlz?file=/demo.js
O ver directamente aquí: https://kbxlz.csb.app/