[pickers] Dayjs object missing toISOString and other date-related functions

[ZachSARAO]

Steps to reproduce

A bug crept into an app I work on (apologies I don't know when, so I can't pin versions easily).

This object:

{
    "$L": "en",
    "$d": "2025-02-03T22:00:00.000Z",
    "$y": 2025,
    "$M": 1,
    "$D": 4,
    "$W": 2,
    "$H": 0,
    "$m": 0,
    "$s": 0,
    "$ms": 0,
    "$x": {},
    "$isDayjsObject": true
}

Does not have the function toISOString() (it used to).

Changing to the date-fns adapter, my component works again. If this is not expected I can dig into this a bit more

Current behavior

No response

Expected behavior

No response

Context

No response

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: toISOString is not a function

[LukasTy]

Hello @ZachSARAO
toISOString is a method on the native Date object.
dayjs library also has a method with the same name.

If your code is calling toISOString on a value controlled by the adapter, the code should work with both adapters.
Here is an example, where selecting a value in logs the result of the toISOString() call to the console.

Could you provide a code example with the version of packages on which your code works? 🤔
Without it, we are helpless here. 🤷

[ZachSARAO]

it was working with:

"@mui/lab": "^6.0.0-beta.19",
"@mui/material": "^6.2.0",
"@mui/x-date-pickers": "^7.23.2",
"dayjs": "^1.11.13",
"react": "^18.3.1",
"react-dom": "^18.3.1",

And a point in time where it was broken:

"@mui/lab": "^6.0.0-beta.24",
"@mui/material": "^6.4.1",
"@mui/x-date-pickers": "^7.24.1",
"dayjs": "^1.11.13",
"react": "^19.0.0",
"react-dom": "^19.0.0",

[ZachSARAO]

And some code:

const DatePickerBase: FC<PropsWithChildren<ExtendedDatePickerProps>> = ({
  isWithinSelection,
  ...props
}) => (
  <Picker
    slotProps={{
      day: ownerState => {
        return {
          onClick: () => {
            if (ownerState.selected) {
              ownerState.onSelectedDaysChange(null)
            }
          },
        }
      },
      field: {
        readOnly: true,
      },
      textField: {
        size: 'small',
        fullWidth: true,
        inputProps: {
          ...(props?.inputProps || {}),
        },
      },
      openPickerButton: {
        size: 'small',
      },
      openPickerIcon: {
        fontSize: 'small',
      },
    }}
    slots={{
      day: props => (
        <PickersDay
          disableMargin={false}
          sx={theme => ({
            borderRadius: 0,
            backgroundColor: isWithinSelection(props.day)
              ? `${alpha(theme.palette.primary.light, 0.5)}`
              : 'inherit',
          })}
          {...props}
        />
      ),
    }}
    disableHighlightToday
    yearsPerRow={4}
    monthsPerRow={4}
    {...props}
  />
)

export const DatePicker = styled(DatePickerBase)(({ theme }) => ({
  '& .MuiInputBase-root': {
    paddingRight: theme.spacing(1),
  },
  '& .MuiPickersToolbar-root': {
    display: 'none',
  },
  '& .MuiDialogActions-root': {
    display: 'none',
  },
  '& .MuiPickersCalendarHeader-labelContainer': {
    '& .MuiPickersCalendarHeader-label': {
      fontSize: '0.8rem',
      '& .MuiIconButton-root': {
        padding: 0,
      },
    },
  },
  '& .MuiYearCalendar-root': {
    button: {
      fontSize: '0.8rem',
    },
  },
}))


// Used here:

  <DatePicker
    inputProps={inputProps as object}
    isWithinSelection={day => isWithinRange(day, from, to)}
    shouldDisableDate={date => {
      if (from) {
        if (date < from) return true
      }

      return false
    }}
    value={to}
    onChange={dt => {
      setDtRange(([from]) => [from, dt])
    }}
    label="To"
  />

[LukasTy]

Please provide a minimal live reproduction test case. This would help a lot 👷.
A live example would be perfect. You can use this example as a base. Thank you!

[ZachSARAO]

https://codesandbox.io/p/sandbox/nostalgic-microservice-ds3f2g?file=%2Fsrc%2Findex.tsx%3A16%2C3&from-embed=&workspaceId=ws_MaV5U21Lhs5HYwSjyJifga - it is actually working...

In my code I have defined this as a RJSF widget, so the problem could be through there.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@ZachSARAO How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.