使用带有 formik 的材料 ui 日期选择器时出现“TypeError date.isBefore 不是函数”

Question

在使用带有 formik 的 material ui 日期选择器时出现“TypeError date.isBefore 不是一个函数”。你能帮我解决我出错的地方吗？我想在 formik 的值对象中获取 dob 字段的值。

================================================= ========================= 我的尝试：

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;

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

请在下面找到沙盒链接-

正文

Answer 1

DatePicker 期待 dayjs，修复：

1. 取消注释 dayjs 从您的代码导入和

2. 更改 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}
    />