te')); return $arr; } /* 遍历用户所有主题 * @param $uid 用户ID * @param int $page 页数 * @param int $pagesize 每页记录条数 * @param bool $desc 排序方式 TRUE降序 FALSE升序 * @param string $key 返回的数组用那一列的值作为 key * @param array $col 查询哪些列 */ function thread_tid_find_by_uid($uid, $page = 1, $pagesize = 1000, $desc = TRUE, $key = 'tid', $col = array()) { if (empty($uid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('uid' => $uid), array('tid' => $orderby), $page, $pagesize, $key, $col); return $arr; } // 遍历栏目下tid 支持数组 $fid = array(1,2,3) function thread_tid_find_by_fid($fid, $page = 1, $pagesize = 1000, $desc = TRUE) { if (empty($fid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('fid' => $fid), array('tid' => $orderby), $page, $pagesize, 'tid', array('tid', 'verify_date')); return $arr; } function thread_tid_delete($tid) { if (empty($tid)) return FALSE; $r = thread_tid__delete(array('tid' => $tid)); return $r; } function thread_tid_count() { $n = thread_tid__count(); return $n; } // 统计用户主题数 大数量下严谨使用非主键统计 function thread_uid_count($uid) { $n = thread_tid__count(array('uid' => $uid)); return $n; } // 统计栏目主题数 大数量下严谨使用非主键统计 function thread_fid_count($fid) { $n = thread_tid__count(array('fid' => $fid)); return $n; } ?>javascript - MUI DatePicker not working with Formik (date.isBefore is not a function) - Stack Overflow

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

    最新消息：雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客
    你的位置： 首页>programmer>javascript - MUI DatePicker not working with Formik (date.isBefore is not a function) - Stack Overflow

    javascript - MUI DatePicker not working with Formik (date.isBefore is not a function) - Stack Overflow

    programmeradmin4浏览0评论

    I am using Formik to make a form in React, I am also using MUI ponents. What happens is that I get the following error:

    date.isBefore is not a function
TypeError: date.isBefore is not a function
    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)

    This is the code I have:

    <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>

    And this is the schema and initial values:

    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: "",
};

    I am very grateful to anyone who can help me <3

    Being able to make the Datepicker work

    I am using Formik to make a form in React, I am also using MUI ponents. What happens is that I get the following error:

    date.isBefore is not a function
TypeError: date.isBefore is not a function
    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)

    This is the code I have:

    <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>

    And this is the schema and initial values:

    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: "",
};

    I am very grateful to anyone who can help me <3

    Being able to make the Datepicker work

    • javascript
    • reactjs
    • material-ui
    • datepicker
    • formik
    Share Improve this question asked Apr 2, 2023 at 16:00 Valentina Loaiza Valentina Loaiza 791 gold badge4 silver badges9 bronze badges
    Add a ment  | 

    1 Answer 1

    Reset to default 14

    Seems like the problem is here:

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

    The type of project_start and project_end should be Dayjs:

    import dayjs, { Dayjs } from 'dayjs';

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

    与本文相关的文章

    发布评论

    评论列表(0)

    1. 暂无评论