javascript - Why I am getting MUI DateTimePicker TypeError: value.isValid is not a function at AdapterDayjs.isValid - Stack Over

admin管理员组

文章数量:1332395

I'm encountering an issue with the MUI DateTimePicker ponent from the @mui/x-date-pickers library when using Day.js as the date adapter. Whenever I try to use the DateTimePicker with Day.js, I get the following error:

value.isValid is not a function TypeError: value.isValid is not a function at AdapterDayjs.isValid (http://localhost:3000/static/js/bundle.js:48844:20) at Object.getTimezone (http://localhost:3000/static/js/bundle.js:67297:58) at http://localhost:3000/static/js/bundle.js:66339:87

my jsx code is:

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

when I try to write startAt and endsAt using empty and null values the form is not even ing in the page. That's why I modified the code to

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

After doing this I can see the datetimepicker in the browser. but whenever I click any date then the error occurs again. I don't know what seems to be the problem . I just want to select the start day of an event and then the end day of that event. but I don't know why AdapterDaysjs is causing the issue. I have this below dependencies package json.

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

I'm encountering an issue with the MUI DateTimePicker ponent from the @mui/x-date-pickers library when using Day.js as the date adapter. Whenever I try to use the DateTimePicker with Day.js, I get the following error:

value.isValid is not a function TypeError: value.isValid is not a function at AdapterDayjs.isValid (http://localhost:3000/static/js/bundle.js:48844:20) at Object.getTimezone (http://localhost:3000/static/js/bundle.js:67297:58) at http://localhost:3000/static/js/bundle.js:66339:87

my jsx code is:

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

when I try to write startAt and endsAt using empty and null values the form is not even ing in the page. That's why I modified the code to

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

After doing this I can see the datetimepicker in the browser. but whenever I click any date then the error occurs again. I don't know what seems to be the problem . I just want to select the start day of an event and then the end day of that event. but I don't know why AdapterDaysjs is causing the issue. I have this below dependencies package json.

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

• javascript
• reactjs
• material-ui
• datetimepicker

Share Follow edited May 13, 2024 at 15:17 Drew Reese 204k1818 gold badges240240 silver badges271271 bronze badges asked May 12, 2024 at 15:12 Insane DAInsane DA 37566 silver badges1818 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Keep your values as Dayjs objects, do not convert (format) them into strings:

// 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
})

I was getting a similar issue but the value.isValid error was appearing instantly on form render.

My values were just about the same as here: (note I am using typeScript)

interface MyDate {
  dateAvailable: dayjs.Dayjs;
}

const initialFormData = {
    dateAvailable: dayjs(),
  };

then

const handleDateChange = (
    date: dayjs.Dayjs,
    name: string
  ) => {
    if (date) {
      console.log(typeof(formData.dateAvailable)) // string, if the form data has not been changed
      setFormData({ ...formData, [name]: date }); // credit to ghybs for this
      console.log(typeof(formData.dateAvailable)) // object
    }
  };

then the issue and my solution

<DesktopDatePicker
   name="dateAvailable"
   // value={formData.dateAvailable} // value.isValid is not a function!
   value={datejs(formData.dateAvailable} // works
   onChange={(date)=>
      handleDateChange(date!, "dateAvailable") // non-null assertion, not the best practice.
   }
/>

I am not sure if this is the best solution and I am open for better ideas, but if someone es along with their DatePicker crashing on render, give this a shot.

edits: i had written if (date) { if (date) { ...

本文标签：