MUI DatePicker与Formik不兼容:date.isBefore不可用
P粉046387133
P粉046387133 2023-08-25 08:54:13
[JavaScript讨论组]

我正在使用Formik在React中创建一个表单,同时也在使用MUI组件。问题是我遇到了以下错误:

date.isBefore不是一个函数
TypeError: date.isBefore不是一个函数
    at DayjsUtils.isBeforeDay (http://localhost:3000/static/js/bundle.js:2319:19)
    at validateDate (http://localhost:3000/main.aa62b4b6c891ec5ff2b0.hot-update.js:10596:43)
    at useValidation (http://localhost:3000/main.aa62b4b6c891ec5ff2b0.hot-update.js:10654:27)
    at usePickerValue (http://localhost:3000/main.aa62b4b6c891ec5ff2b0.hot-update.js:10019:75)
    at usePicker (http://localhost:3000/main.aa62b4b6c891ec5ff2b0.hot-update.js:9876:94)
    at useDesktopPicker (http://localhost:3000/main.aa62b4b6c891ec5ff2b0.hot-update.js:7848:60)
    at DesktopDatePicker (http://localhost:3000/main.aa62b4b6c891ec5ff2b0.hot-update.js:3956:90)
    at renderWithHooks (http://localhost:3000/static/js/bundle.js:103306:22)
    at updateForwardRef (http://localhost:3000/static/js/bundle.js:105877:24)
    at beginWork (http://localhost:3000/static/js/bundle.js:107924:20)

这是我的代码:

<Formik
          onSubmit={handleFormSubmit}
          initialValues={initialValuesProject}
          validationSchema={projectSchema}
        >
          {({ values, handleChange, handleSubmit, setFieldValue }) => (
            <form onSubmit={handleSubmit}>
                  <Box width="50%">
                    <LocalizationProvider dateAdapter={AdapterDayjs}>
                      <DatePicker
                        id="project_start"
                        name="project_start"
                        value={values.project_start}
                        slotProps={{
                          textField: {
                            size: "small",
                            margin: "dense",
                          },
                        }}
                      />
                      <DatePicker
                        id="project_end"
                        name="project_end"
                        value={values.project_end}
                        slotProps={{
                          textField: { size: "small", margin: "dense" },
                        }}
                      />
                    </LocalizationProvider>
              </Box>
            </form>
          )}
        </Formik>

这是模式和初始值:

const projectSchema = yup.object().shape({
  project_start: yup.date(),
  project_end: yup.date(),
  project_name: yup.string().required("required"),
  usersId: yup.string(),
  partnerId: yup.string(),
  categoryId: yup.string(),
});

const initialValuesProject = {
  project_start: Date.now(),
  project_end: Date.now(),
  project_name: "",
  usersId: "",
  partnerId: "",
  categoryId: "",
};

非常感谢能帮助我的任何人 <3

能够使日期选择器工作

P粉046387133
P粉046387133

全部回复(1)
P粉449281068

看起来问题出在这里:

project_start: Date.now(),
project_end: Date.now(),

project_start和project_end的类型应该是Dayjs:

import dayjs, { Dayjs } from 'dayjs';

const initialValuesProject = {
  project_start: dayjs(Date.now()),
  project_end: dayjs(Date.now()),
  project_name: "",
  usersId: "",
  partnerId: "",
  categoryId: "",
};
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号