[pickers] Error: value.isValid is not a function at AdapterDayjs.isValid after v7

[arajczy]

Steps to reproduce

go to https://codesandbox.io/p/devbox/priceless-spence-q3tmp8

Current behavior

Uncaught TypeError: value.isValid is not a function
at AdapterDayjs.isValid (@mui_x-date-pickers_AdapterDayjs.js?v=39321bad:574:20)
at Object.getTimezone (@mui_x-date-pickers_DatePicker.js?v=968b33b8:1020:58)
at @mui_x-date-pickers_DatePicker.js?v=968b33b8:1817:59
at mountMemo (chunk-WIE3TTAG.js?v=0ca62ba9:12817:27)
at Object.useMemo (chunk-WIE3TTAG.js?v=0ca62ba9:13141:24)
at Object.useMemo (chunk-VMGWFLE5.js?v=0ca62ba9:1094:29)
at useValueWithTimezone (@mui_x-date-pickers_DatePicker.js?v=968b33b8:1817:32)
at usePickerValue (@mui_x-date-pickers_DatePicker.js?v=968b33b8:1996:7)
at usePicker (@mui_x-date-pickers_DatePicker.js?v=968b33b8:2485:31)
at useDesktopPicker (@mui_x-date-pickers_DatePicker.js?v=968b33b8:3049:7)
AdapterDayjs.isValid @ @mui_x-date-pickers_AdapterDayjs.js?v=39321bad:574
getTimezone @ @mui_x-date-pickers_DatePicker.js?v=968b33b8:1020
(névtelen) @ @mui_x-date-pickers_DatePicker.js?v=968b33b8:1817
mountMemo @ chunk-WIE3TTAG.js?v=0ca62ba9:12817
useMemo @ chunk-WIE3TTAG.js?v=0ca62ba9:13141
useMemo @ chunk-VMGWFLE5.js?v=0ca62ba9:1094
useValueWithTimezone @ @mui_x-date-pickers_DatePicker.js?v=968b33b8:1817
usePickerValue @ @mui_x-date-pickers_DatePicker.js?v=968b33b8:1996
usePicker @ @mui_x-date-pickers_DatePicker.js?v=968b33b8:2485
useDesktopPicker @ @mui_x-date-pickers_DatePicker.js?v=968b33b8:3049
DesktopDatePicker2 @ @mui_x-date-pickers_DatePicker.js?v=968b33b8:10166
renderWithHooks @ chunk-WIE3TTAG.js?v=0ca62ba9:12171
updateForwardRef @ chunk-WIE3TTAG.js?v=0ca62ba9:14327
beginWork @ chunk-WIE3TTAG.js?v=0ca62ba9:15934
beginWork$1 @ chunk-WIE3TTAG.js?v=0ca62ba9:19749
performUnitOfWork @ chunk-WIE3TTAG.js?v=0ca62ba9:19194
workLoopSync @ chunk-WIE3TTAG.js?v=0ca62ba9:19133
renderRootSync @ chunk-WIE3TTAG.js?v=0ca62ba9:19112
recoverFromConcurrentError @ chunk-WIE3TTAG.js?v=0ca62ba9:18732
performConcurrentWorkOnRoot @ chunk-WIE3TTAG.js?v=0ca62ba9:18680
workLoop @ chunk-WIE3TTAG.js?v=0ca62ba9:197
flushWork @ chunk-WIE3TTAG.js?v=0ca62ba9:176
performWorkUntilDeadline @ chunk-WIE3TTAG.js?v=0ca62ba9:384
23 további keret megjelenítése
Kevesebb megjelenítése
8ServiceWorkerWrapper.jsx:17

Expected behavior

With @mui/x-date-pickers 6.19.9 - it is working but if I upgrade to @mui/x-date-pickers 7.1.1 I get the above error.
If I comment out the field labeled as "StartDate" - it works with version 7.1.1 too

Context

No response

Your environment

npx @mui/envinfo

I was using Chrome and Firefox browsers with the same results
  System:
    OS: macOS 14.4.1
  Binaries:
    Node: 20.12.1 - ~/.nvm/versions/node/v20.12.1/bin/node
    npm: 10.5.1 - ~/.nvm/versions/node/v20.12.1/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  Browsers:
    Chrome: 123.0.6312.107
    Edge: 123.0.2420.81
    Safari: 17.4.1
  npmPackages:
    @emotion/react: ^11.11.4 => 11.11.4
    @emotion/styled: ^11.11.5 => 11.11.5
    @mui/icons-material: ^5.15.15 => 5.15.15
    @mui/material: ^5.15.15 => 5.15.15
    @mui/system: ^5.15.15 => 5.15.15
    @mui/utils: ^5.15.14 => 5.15.14
    @mui/x-date-pickers: ^7.1.1 => 7.1.1
    @types/react: ^18.2.74 => 18.2.74
    react: ^18.2.0 => 18.2.0
    react-dom: ^18.2.0 => 18.2.0

Search keywords: isValid AdapterDayjs

[flaviendelangle]

Hi,
Thanks for your contribution.

Could you provide a working reproduction, this Codesandbox template might be a good starting point.

[arajczy]

Hi,
Go to https://codesandbox.io/p/devbox/priceless-spence-q3tmp8 to see the reproduction of the issue.

Thanks

[flaviendelangle]

Unless I'm missing something, your reproduction case is not starting correctly because of a missing dependency:

[arajczy]

I have added final-form and it should be now working

[arajczy]

strangely, if I comment out the first date field, the error goes away and it is working:

[arajczy]

but if both date fields are there, then the error comes up:

[LukasTy]

@arajczy The problem is that final-form is providing a value of "" (empty string) when a form entry is empty.
This is not a valid value for Pickers, empty value is represented with a null.
The following diff solves your problem:

{...input}
+value={input.value || null}

Does it solve your problem? 🤔

[arajczy]

@LukasTy thanks a lot, it solves my problem.

[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.

@arajczy: 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.

[flaviendelangle]

By the way, the disableMaskedInput pro do not exist anymore, you should be able to drop it 👍

[arajczy]

Good to know, thanks