为什么我收到 MUI DateTimePicker TypeError: value.isValid is not a function at AdapterDayjs.isValid

Question

在使用 Day.js 作为日期适配器时，我遇到了 @mui/x-date-pickers 库中的 MUI DateTimePicker 组件的问题。每当我尝试将 DateTimePicker 与 Day.js 一起使用时，我都会收到以下错误：

value.isValid 不是一个函数 TypeError: value.isValid 不是一个 功能 在 AdapterDayjs.isValid (http://localhost:3000/static/js/bundle.js:48844:20) 在 Object.getTimezone (http://localhost:3000/static/js/bundle.js:67297:58) 在http://localhost:3000/static/js/bundle.js:66339:87

我的jsx代码是：

import React, { useState } from 'react';
import dayjs from 'dayjs';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
const initialValues =    {
  startedAt: '', // this might be an issue
  endsAt: dayjs(),
}
export const createCalendar = () => {
  const [formValues, setFormValues] = useState(initialValues);

  const handleDateChange = (date, dateType) =>{
    const formatedDate = dayjs(date).format("MMMM DD, YYYY hh:mm A");
    setFormValues({...formValues,[dateType]:formatedDate})

  }
  const handleSubmit = (e) =>{
    e.preventDefault();
    setFormValues(initialValues);

  }
 return (
     <form onSubmit={handleSubmit} className='space-y-4'>
                <Grid item xs={12}>
                  <LocalizationProvider dateAdapter={AdapterDayjs}>
                     <DateTimePicker
                         renderInput={(props) => <TextField {...props}/>}

                        label="Start Date and Time"
                        value={formValues.startedAt}
                        onChange={(newValue)=>
                          handleDateChange(newValue, "startedAt")
                        }
                        inputFormat="MM/dd/yyyy hh:mm a"
                        className='w-full'
                        sx={{width : "100%"}}
                    
                      />
                    </LocalizationProvider>         
                </Grid> 
                <Grid item xs={12}>
                  <LocalizationProvider dateAdapter={AdapterDayjs}>
                     <DateTimePicker
                         renderInput={(props) => <TextField {...props}/>}

                        label="End Date and Time"
                        value={formValues.endsAt}
                        onChange={(newValue)=>
                          handleDateChange(newValue, "endsAt")
                        }
                        inputFormat="MM/dd/yyyy hh:mm a"
                        className='w-full'
                        sx={{width : "100%"}}
                    
                      />
                    </LocalizationProvider>         
                </Grid> 
              <Button variant='contained' color='primary' type='submit'>
                  Submit
              </Button>
 </form>
)}

当我尝试使用空值和空值编写 startAt 和 endsAt 时，表单甚至不会出现在页面中。这就是为什么我将代码修改为

const initialValues =    {
  startedAt: dayjs(), 
  endsAt: dayjs(),
}

执行此操作后，我可以在浏览器中看到日期时间选择器。但每当我单击任何日期时，错误都会再次发生。我不知道问题出在哪里。我只想选择活动的开始日期，然后选择该活动的结束日期。但我不知道为什么 AdapterDaysjs 导致了这个问题。 我有以下依赖项 打包json。

"@mui/x-date-pickers": "^7.4.0",
"dayjs": "^1.11.11",

Answer 1

将您的值保留为

Dayjs

对象，不要将它们转换（格式化）为字符串：

// Instead of:
const formatedDate = dayjs(date).format("MMMM DD, YYYY hh:mm A");
setFormValues({...formValues,[dateType]:formatedDate})

// ...just do:
setFormValues({
  ...formValues,
  [dateType]: date // Already a Dayjs object
})