[pickers] DateField behavior is impacted by the year format

[ash14]

Search keywords

DateField time

Latest version

• I have tested the latest version

Steps to reproduce

Link to live example: https://codesandbox.io/p/sandbox/gallant-liskov-9xc4h3?file=%2Fsrc%2FApp.js%3A21%2C8-21%2C17

Steps:

1. Enter a date like "05/05/05" in the first <DateField>
2. Enter the same date in the second one ("05/05/2005")
3. Note the value of the second field has a minute and hour component which is not expected

Notes:

• This doesn't seem to be reproducible if your system timezone is set to UTC+0.
• Setting dayjs.extend(timezone); seems to be a required condition to reproduce the issue.

Current behavior

When the DateField is set to use a 4-digit year format the actual value of the input has a time component. This does not occur when using a 2-digit year format.

Expected behavior

In the example above (in UTC-7) both values should display as 2005-05-05T07:00:00.000Z

Context

No response

Your environment

npx @mui/envinfo

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

Order ID or Support key 💳 (optional)

No response

[LukasTy]

This is a really strange behavior on dayjs side.
The problem seems to stem from the fact that the year 200 is considered valid by dayjs, but when a date is created, the offset gets messed up as seen in the screenshot below.
The first two lines are for the 2-digit year format
The 3rd and 4th lines are for the 4-digit year format
Both are in the America/New_York timezone on a device with GMT+3 timezone.

Pasting the 2005 value directly does not result in this problem.

This is just an initial report and needs further investigation.

[ash14]

It seems as if some internal logic is failing to zero out hour/minute components on time zone changes across dates (comparison with zero, perhaps?)

One way to reproduce this without "invalid" years like 200 can be, e.g. when in the Asia/Hong_Kong timezone:

• Paste 05/05/2020, output: 2020-05-04T16:00:00.000Z. Expected.
• Paste 25/12/1941, output: 1941-12-24T15:30:00.000Z. Expected.
• Paste back 05/05/2020 again, output is 2020-05-04T16:30:00.000Z which is not expected

[DavidJohnWilliams]

We have a very similar issue to this.

Some additional info:

With DayJs version 1.11.7:

When typing "01/02/2022" into the picker it raises the following events:

Below shows the output from dayjs.isValid()

Code Sandbox: https://codesandbox.io/p/sandbox/datepicker-dayjs-1-11-7-ccy8nk

With DayJs version 1.11.8:

When typing "01/02/2022" into the picker it raises the following events:

Below shows the output from dayjs.isValid()

Code Sandbox: https://codesandbox.io/p/sandbox/datepicker-dayjs-1-11-13-74y97c

It seems like it could be related to iamkun/dayjs@00c223b