[DatePickerElement/DateTimePickerElement]: missing support for mui recommended lib `dayjs`

Duplicates

I have searched the existing issues

Latest version

I have tested the latest version

Current behavior 😯

We intended to swap out the date-fns adapter with the dayjs adapter that MUI recommended.

Unfortunately, this package is no longer working and crashes the application with the following stacktrace in the console:

Uncaught TypeError: value.isBefore is not a function
    at AdapterDayjs.isBeforeDay (@mui_x-date-pickers_AdapterDayjs.js?v=8fd1a393:894:22)
    at validateDate (chunk-G76E577Z.js?v=daf96ac0:4322:43)
    at useValidation (chunk-G76E577Z.js?v=daf96ac0:4351:27)
    at usePickerValue (chunk-G76E577Z.js?v=daf96ac0:6575:3)
    at usePicker (chunk-G76E577Z.js?v=daf96ac0:6946:31)
    at useDesktopPicker (chunk-G76E577Z.js?v=daf96ac0:11137:7)
    at DesktopDatePicker2 (chunk-G76E577Z.js?v=daf96ac0:11281:7)
    at renderWithHooks (chunk-QFTU2CLD.js?v=daf96ac0:12171:26)
    at updateForwardRef (chunk-QFTU2CLD.js?v=daf96ac0:14327:28)
    at beginWork (chunk-QFTU2CLD.js?v=daf96ac0:15934:22)

In addition the dayjs demo link in the README points to the date-fns example and I could not find any related component in the source code:

react-hook-form-mui/README.md

Lines 96 to 99 in 9550667

    
           Examples for Dayjs or DateFns provider (used in the demo): 
        
           * [DateFns](/packages/rhf-mui/src/DateFnsProvider.tsx) 
        
           * [Dayjs](/packages/rhf-mui/src/DateFnsProvider.tsx)

Expected behavior 🤔

Working example based on the MUI recommended lib dayjs.

Steps to reproduce 🕹

N/A

@SimonGolms DatePickerElement is working fine for me with Dayjs.

https://stackblitz.com/edit/github-hxddty?file=src%2FApp.tsx

i believe the problem is on a translation layer with default values, see this your updated pen: https://stackblitz.com/edit/github-hxddty-giefxb?file=src%2FApp.tsx - uncommenting the problematic line will break the app

@sKopheK raised a pull request that will address this issue. In the meantime, you can either enclose the default string value with dayjs or utilize the transform prop to manually handle the conversion from a string to a dayjs object.

useForm({
    defaultValues: {
      basic: dayjs('2021-11-11'),
    },
  });

// ============ OR ====================

transform={{
    input: (newValue) => newValue && typeof newValue === 'string' ? dayjs(newValue) : newValue,
}}

@sKopheK raised a pull request that will address this issue. In the meantime, you can either enclose the default string value with dayjs or utilize the transform prop to manually handle the conversion from a string to a dayjs object.
useForm({
    defaultValues: {
      basic: dayjs('2021-11-11'),
    },
  });

// ============ OR ====================

transform={{
    input: (newValue) => newValue && typeof newValue === 'string' ? dayjs(newValue) : newValue,
}}

as said in the comment "will break, no matter what scalar value or Date/dayjs object" - so even when you "enclose the default string value with dayjs" it breaks

as said in the comment "will break, no matter what scalar value or Date/dayjs object" - so even when you "enclose the default string value with dayjs" it breaks

@sKopheK doesn't seem like it is breaking

https://stackblitz.com/edit/github-hxddty-cbjkx2?file=src%2FApp.tsx

you're right, it seems to be working. i was getting white screen, but it was still loading (~30sec). is there a console window/pane in the stackblitz environment? could not find it so assumed there was not and white screen = error

EDIT: it was not working in my app, but the problem was with creating dayJs instance on server instead of client 🤦 :D
thanks for forcing me to check the cause of the problem once again!

	Examples for Dayjs or DateFns provider (used in the demo):

	* [DateFns](/packages/rhf-mui/src/DateFnsProvider.tsx)
	* [Dayjs](/packages/rhf-mui/src/DateFnsProvider.tsx)