[TimePicker] AdapterDayjs fails to validate input when using with TimePicker

[hangryernest]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

When using dayjs-adapter, with time picker, when a user changes an existing time to something invalid (ie 99:99) the input does not enter an error state. Tested with '@mui/lab/AdapterDateFns" and '@mui/lab/AdapterMoment' and the input goes into error state as expected.

here is the the sandbox:
https://codesandbox.io/s/basictimepicker-material-demo-forked-mk19f?file=/public/index.html

Left: AdapterDateFns / Right: AdapterDayjs

Expected behavior 🤔

adapter should handle invalid times

Steps to reproduce 🕹

Steps:
https://codesandbox.io/s/basictimepicker-material-demo-forked-mk19f?file=/public/index.html

1. enter invalid values in the two time pickers and see the difference

Context 🔦

No response

Your environment 🌎

`npx @mui/envinfo`

  System:
    OS: Windows 10 10.0.22000
  Binaries:
    Node: 14.16.1 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 6.14.12 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Spartan (44.22000.120.0), Chromium (96.0.1054.29)
  npmPackages:
    @emotion/react: 11.5.0 => 11.5.0 
    @emotion/styled: 11.3.0 => 11.3.0 
    @mui/core:  5.0.0-alpha.54 
    @mui/icons-material: 5.1.0 => 5.1.0 
    @mui/lab: 5.0.0-alpha.54 => 5.0.0-alpha.54 
    @mui/material: 5.1.0 => 5.1.0 
    @mui/private-theming:  5.1.0 
    @mui/styled-engine:  5.1.0 
    @mui/styles: 5.1.0 => 5.1.0
    @mui/system:  5.1.0
    @mui/types:  7.1.0
    @mui/utils:  5.1.1
    @mui/x-data-grid-pro: 5.0.1 => 5.0.1
    @mui/x-license-pro:  5.0.1
    @types/react:  17.0.1
    react: 17.0.2 => 17.0.2
    react-dom: 17.0.2 => 17.0.2

[RCout1nho]

I'm having the same problem, but for date validation. For example, if I put the date as 15/60/2021 (DD/MM/YYYY format), dayjs sums up the months that exceeded 12 and creates a new date, in this case 10/15/2025. The same thing should probably happen with the hours in your case. I'm still looking for a solution...

[hangryernest]

Hi no not yet, waiting for the adapter fix

[RCout1nho]

I think the problem is that if the date is incorrect, as I mentioned earlier, dayjs does the sum and ends up validating the date in its date object. But you can use dayjs().$d to use the date in the javascript date format, in this .$d property the date is validated correctly, although the same doesn't happen with the dayjs object.
Momentarily I'm going to use this property to validate directly in the onChange() of my DatePicker, but I hope the adjustments are made by the adapter.

[RCout1nho]

You can use:

const date = dayjs(date_as_string, date_format, true).$d

the last prop is strict, if true, it will validate correctly on $d attribute

[hangryernest]

great thanks for the suggestion, I'll give it a try

[digicoffey]

@RCout1nho Thanks for the suggestion, I'm struggling with this too.

Would you know if they have removed the "Invalid time format" validation message too? I can't seem to trigger it and none of the examples seem to display it.

[RCout1nho]

@RCout1nho Thanks for the suggestion, I'm struggling with this too.

Would you know if they have removed the "Invalid time format" validation message too? I can't seem to trigger it and none of the examples seem to display it.

You can use the onError prop like this:

onError={(reason, value)=>{}}

reason prop can be: 'minDate' | 'maxDate' | 'invalidDate' | 'shouldDisableDate' | 'disablePast' | null
value is the date value

[flaviendelangle]

The last version of the library no longer has the bug see this reproduction case