I added yup validation in the date picker so what is happening now if I click on submit it says field required Invalid Date! but my task needs to set validation such like the error will generate only if the date is greater than today's date that I have added in max and also it is not added in any .required("Required!") thing but not sure why it's working as Required! field which I don't need to set as Required!
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>
);
}
Not sure about why max should work here?
Ideally when you wanted to test out some comparison . They have test method there. So basically you need to do this:
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;
}
)
});
Here is live demo codesandbox: https://codesandbox.io/s/material-demo-forked-kbxlz?file=/demo.js
Or directly see here: https://kbxlz.csb.app/