Getting "TypeError date.isBefore is not a function" while using material ui date-picker with formik

Question

Getting "TypeError date.isBefore is not a function" while using material ui date-picker with formik.Can you help me where I am going wrong. I want to get value of dob field in values object of formik.

========================================================================== My attempt:

import React from "react";
import { Formik } from "formik";
import { Box, Button, Paper, Stack, TextField, styled } from "@mui/material";
import { Lock } from "@mui/icons-material";
import * as yup from "yup";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { DatePicker } from "@mui/x-date-pickers/DatePicker";
// import dayjs from 'dayjs';

const LoginPage = () => {
  const StyledPaper = styled(Paper)({
    width: "500px",
    borderRadius: "10px",
    backgroundColor: "white",
    padding: "30px",
    position: "absolute",
    top: "50%",
    left: "50%",
    transform: "translate(-50%, -50%)"
  });

  //----VALIDATION-----//

  const userSchema = yup.object().shape({
    userName: yup.string().required("required"),
    dob: yup.date().required("required")
  });

  const handleFormSubmit = (values, onSubmitProps) => {
    console.log(values);
  };

  return (
    <Formik
      onSubmit={handleFormSubmit}
      initialValues={{ userName: "", dob: new Date() }}
      validationSchema={userSchema}
    >
      {({
        values,
        errors,
        touched,
        handleBlur,
        handleChange,
        handleSubmit,
        resetForm
      }) => (
        <form onSubmit={handleSubmit}>
          <StyledPaper elevation={3}>
            <Box
              sx={{
                display: "flex",
                justifyContent: "center",
                alignItems: "center",
                margin: "10px"
              }}
            >
              <Lock color="primary" fontSize="large" />
            </Box>
            <Stack direction="column" gap={2}>
              <TextField
                label="User Name"
                value={values.userName}
                onChange={handleChange}
                onBlur={handleBlur}
                name="userName"
                error={Boolean(touched.userName) && Boolean(errors.userName)}
                helperText={touched.userName && errors.userName}
              />

              <LocalizationProvider dateAdapter={AdapterDayjs}>
                <DatePicker
                  label="Date of birth"
                  value={values.dob}
                  onChange={handleChange}
                  onBlur={handleBlur}
                  name="dob"
                  error={Boolean(touched.dob) && Boolean(errors.dob)}
                  helperText={touched.dob && errors.dob}
                />
              </LocalizationProvider>

              <Button variant="contained" type="submit">
                Submit
              </Button>
            </Stack>
          </StyledPaper>
        </form>
      )}
    </Formik>
  );
};

export default LoginPage;

=========================================================================================

Please find below the sandbox link-

text

Answer 1

DatePicker is expecting dayjs, to fix:

1. Uncomment the dayjs import from your code and

2. Change the value prop for DatePicker

    import dayjs from 'dayjs';
   
    <DatePicker
      label="Date of birth"
      value={dayjs(values.dob)}
      onChange={handleChange}
      onBlur={handleBlur}
      name="dob"
      error={Boolean(touched.dob) && Boolean(errors.dob)}
      helperText={touched.dob && errors.dob}
    />