Estoy trabajando en un formulario de registro hecho con yup, react-hook-form y MUI DatePicker/TextField. Me gustaría tener un campo de fecha de nacimiento que verifique si el usuario tiene más de 18 años. El mensaje de error se muestra correctamente, pero el color rojo del estado de error solo funciona si la entrada está vacía (y no cuando la edad es menor de 18 años). Estoy registrando en la consola el valor de "no válido" que dicta el color rojo, y se establece en verdadero cuando debería.
Aquí hay un enlace de sandbox: https://codesandbox.io/s/datepicker-yup-validation-8rod3?file=/src/App.js
esta solución se escribió con formik, yup y material datepicker:
import "./styles.css"; import LocalizationProvider from "@mui/lab/LocalizationProvider"; import AdapterDateFns from "@mui/lab/AdapterDateFns"; import DateTimePicker from "@mui/lab/DateTimePicker"; import * as Yup from "yup"; import { useFormik } from "formik"; import { Button, TextField } from "@mui/material"; import moment from "moment"; var y = new Date(); y.setFullYear(y.getFullYear() - 18); const validationSchema = Yup.object().shape({ voyageNumber: Yup.number(), voyageStartDate: Yup.date(), voyageEndDate: Yup.date().when("voyageStartDate", (voyageStartDate, schema) => moment(voyageStartDate).isValid() ? schema.max(voyageStartDate) : schema ) }); export default function App() { const formik = useFormik({ initialValues: { voyageStartDate: moment().add(-18, "years"), voyageEndDate: null }, validationSchema: validationSchema, onSubmit: (values) => { console.log(values); } }); return ( <div className="App"> <form autoComplete="off"> <LocalizationProvider dateAdapter={AdapterDateFns}> <DateTimePicker renderInput={(props) => ( <TextField variant="standard" className="w-100" name="voyageEndDate" required {...props} error={ formik.touched?.voyageEndDate && !!formik.errors?.voyageEndDate } helperText={ formik.touched?.voyageEndDate && formik.errors?.voyageEndDate } /> )} name="voyageEndDate" label="Voyage End" value={formik.values?.voyageEndDate} onChange={(newValue) => { console.log( moment(newValue).format("YYYY-MM-DD HH:mm:ss"), moment(y).format("YYYY-MM-DD HH:mm:ss"), formik.errors ); formik.setFieldTouched("voyageEndDate"); formik.setFieldValue( "voyageEndDate", moment(newValue).format("YYYY-MM-DD HH:mm:ss") ); }} onKeyPress={() => formik.setFieldTouched("voyageEndDate")} /> </LocalizationProvider> <div style={{ marginTop: "15px" }}> <Button variant="contained" color="primary" type="submit"> Add Voyage </Button> </div> </form> </div> ); }Solo necesita poner el atributo de error después de {...params} como este:
<DatePicker ... renderInput={(params) => ( <TextField helperText={invalid ? error.message : null} id="dateOfBirth" variant="standard" margin="dense" fullWidth color="primary" autoComplete="bday" {...params} error={invalid} /> )} />