[pickers] TypeError when providing a default value to the DatePicker field

[sjolundmartin]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/s/datepicker-error-cufgpy?file=/src/App.tsx

Steps:

1. Create a form using react-hook-form
2. Use the DateTimePicker as a controlled field
3. Provide a default value to the controller

Current behavior 😯

A TypeError is being thrown: date.isBefore is not a function

Expected behavior 🤔

No error with the DateTimePicker field containing the default value.

Context 🔦

I'm developing an edit form for a resource. The form is supposed to edit an object and takes the current object as its default values. This was working with MUI date and time pickers v5. The error came about with v6.

Your environment 🌎

npx @mui/envinfo

  Using Google Chrome as a browser

  System:
    OS: macOS 13.1
  Binaries:
    Node: 18.15.0 - ~/.nvm/versions/node/v18.15.0/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 9.5.0 - ~/.nvm/versions/node/v18.15.0/bin/npm
  Browsers:
    Chrome: 111.0.5563.64
    Edge: 111.0.1661.51
    Firefox: Not Found
    Safari: 16.2
  npmPackages:
    @emotion/react: ^11.9.0 => 11.10.6 
    @emotion/styled: ^11.8.1 => 11.10.6 
    @mui/base:  5.0.0-alpha.122 
    @mui/core-downloads-tracker:  5.11.14 
    @mui/icons-material: ^5.8.0 => 5.11.11 
    @mui/material: ^5.8.1 => 5.11.14 
    @mui/private-theming:  5.11.13 
    @mui/styled-engine:  5.11.11 
    @mui/styled-engine-sc: ^5.8.0 => 5.11.11 
    @mui/system:  5.11.14 
    @mui/types:  7.2.3 
    @mui/utils:  5.11.13 
    @mui/x-date-pickers: ^6.0.2 => 6.0.2 
    @types/react: ^18.0.9 => 18.0.28 
    react: ^18.1.0 => 18.2.0 
    react-dom: ^18.1.0 => 18.2.0 
    styled-components: ^5.3.5 => 5.3.9 
    typescript: ^4.6.4 => 4.9.5 

Order ID or Support key 💳 (optional)

No response

[LukasTy]

Hello @sjolundmartin
That's to be expected. You were relying on a fragile feature of pickers being able to accept various forms of data and still work with it but in v6 we have dropped this error-prone behavior in favor of being type-strict.

TL.DR. In your case, if you want to use moment for working with dates - ensure that you are passing a moment date object, or use AdapterDateFns if you need to work with JS date objects exclusively. 😉