formik 不适用于初始值 new Date

Question

我试图像这样设置日期的初始值，但是当组件呈现时，它会给我这样的错误

const formik = useFormik ({
    initialValues: {
    dob: new Date ()
    }
})

这样做时我收到以下错误

未捕获类型错误：date.isBefore 不是函数

我正在使用 formik 和材质 UI 日期选择器，如下所示

 <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DatePicker
           name="dob"
           id="dob"
           variant="standard"
           label="dob"
           value={formik.values.dob}
           renderInput={(params) => (
                <TextField {...params} />
           )}
           onChange={(value) => formik.setFieldValue('dob', value, true)}
                error={formik?.touched?.dob && formik?.errors?.dob ? true : false}
                helperText={formik.touched.dob && formik.errors.dob}
      />
 </LocalizationProvider>
                                

Answer 1

如果您使用 MUI（Material UI）中的 DatePicker，则日期必须为

dayjs.Dayjs

类型。

在

initialValues

中，执行

dob: new Date ()

，而不是

dob: dayjs()

。这样您就可以在

dob

中获得当前日期和时间。

稍后，当您想将其转换为 javascript

Date

对象时，请执行

dob.toDate()

。

Answer 2

将 MaterialUI v6 与 dayjs 结合使用

<DatePicker
    disableFuture
    label="Date of Birth"
    id="dateOfBirth"
    name="dateOfBirth"
    value={formik.values.dateOfBirth}
    onChange={(value) => {
      formik.setFieldValue("dateOfBirth", dayjs(value).format());
    }}
    onBlur={formik.handleBlur}
    error={
      formik.touched.dateOfBirth &&
      Boolean(formik.errors.dateOfBirth)
    }
    helperText={
      formik.touched.dateOfBirth && formik.errors.dateOfBirth
    }
 />