(@mui/x-date-pickers: 6.0.3 compatible) TypeError: date.isBefore is not a function

[NorHsangPha]

Is there an existing issue for this?

• I have searched this repository's issues and believe that this is not a duplicate.

I'm using ...

React Scheduler

Current Behaviour

On the AppointmentTooltip edit button enable and press throw error: TypeError: date.isBefore is not a function.

working fine on @mui/x-date-pickers: ^5.0.0-beta.5

Expected Behaviour

The AppointmentTooltip method works compatibly with the newer version of @mui/x-date-pickers

Steps to Reproduce

To reproduce:

• CodeSandbox Link

Environment

• next: ^13.2.4
• react: ^18.2.0
• dx-react-core: ^4.0.3
• dx-react-scheduler: ^4.0.3
• dx-react-scheduler-material-ui: ^4.0.3
• @mui/icons-material: ^5.11.11
• @mui/lab: ^5.0.0-alpha.124
• @mui/material: ^5.11.14
• @mui/x-date-pickers: ^6.0.3

[Artem]

6.0.4 still error!

[jjcroftiv]

I received this error today. I changed my form field values from strings, "2022-12-01T05:00:00.000Z", to dayjs dates,
dayjs("2022-12-01T05:00:00.000Z"), which has resolved the issue for me.

[Artem]

its also work for me
<DesktopDateTimePicker
{...field}
value={dayjs(field.value)}
format={"DD MM YYYY HH:mm"}
slotProps={{ textField: { variant: 'outlined' } }}
/>}

[NorHsangPha]

My current issue came from dx-react-scheduler not @mui/x-date-pickers itself,
dx-react-scheduler not accept dayjs object but native Date object.

I tried this

const currentDate = dayjs("2023-03-28").toDate();

  const events = mockupEventData?.map(
    ({ title, date, startDate, endDate, type }) => ({
      startDate: dayjs(startDate).toDate(),
      endDate: dayjs(endDate).toDate(),
      title,
      type,
    })
  );

  return (
    <Scheduler data={events}>
      <ViewState currentDate={currentDate} />
      <EditingState onCommitChanges={commitChanges} />
      <IntegratedEditing />
      <DayView startDayHour={8} endDayHour={20} />
      <ConfirmationDialog />
      <Appointments />
      <AppointmentTooltip showOpenButton showDeleteButton />
      <AppointmentForm />
      <Resources data={resources} />
    </Scheduler>

the error will appear when clicking to edit the appointment events

• I need to use some new features in @mui/x-date-pickers 6.0
• My workaround is to install multiple @mui/x-date-pickers as npm name alias

[Tom]

Hello,

Reactive Scheduler doesn't support v6 of @mui/x-date-pickers. This package contains a number of breaking changes that we didn't address. The issue you encountered occurs due to changes made to the value property: Update the format of the value prop.

While we're not planning to migrate to v6, your idea to replace an editor is valid. I've modified my example as a starting point: CodeSandBox. Note that I used the AdapterMoment adapter because Reactive Scheduler uses moment.js internally. Anyway, I cannot guarantee that these new editors will work in all cases as we didn't test them. Please keep in mind that more changes may be needed depending on your Scheduler configuration.