[pickerts] not correctly setting the date time using dayjs with timezone

[Olzindel]

Steps to reproduce

Link to live example: https://codesandbox.io/p/sandbox/miu-datepicker-bug-date-5npl6g

Steps:

1. Set up Localization provider with dayjs adapter with timezone plugin.

import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import utc from "dayjs/plugin/utc";
import timezone from "dayjs/plugin/timezone";

dayjs.extend(utc).extend(timezone);

// ...
<LocalizationProvider dateAdapter={AdapterDayjs}>
      // ...
</LocalizationProvider>

3. Simply use the textfield input of the DesktopDatePicker

Current behavior

The date returned by the DesktopDatePicker has a time, depending of the timezone.

Expected behavior

The time returned by the DesktopDatePicker should be similar as the one returned when there is no timezone involved (i.e. "00:00:00"), but relative to the timezone.
For example, if the inputed date is 01/01/2020 (in MM/DD/YYYY format) in a GMT+0100 environment, it should return the date 2021-12-31T23:00:00.000Z

Context

No response

Your environment

npx @mui/envinfo

  System:
    OS: macOS 14.2.1
  Binaries:
    Node: 20.8.1 - ~/.nvm/versions/node/v20.8.1/bin/node
    npm: 8.19.3 - ~/repos/main/node_modules/.bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 119.0.6045.199
    Edge: Not Found
    Safari: 17.2.1

Search keywords: dayjs timezone datepicker

[coratgerl]

I encountered the same issue 😔

[Olzindel]

Note that I think I fixed this issue on my codebase by doing something like

export const CustomDesktopDatePicker = () => {
	const [lastDate, setLastDate] = useState(null)

	return (
		<DesktopDatePicker
			onChange={(date) => {
				const nativeDate = date?.toDate()

				if (!nativeDate) {
					return
				}

				if (
					lastDate &&
					nativeDate.getTimezoneOffset() !==
						lastDate.getTimezoneOffset()
				) {
					nativeDate.setHours(0, 0, 0, 0)
				}

				if (dayjs(nativeDate).isValid()) setLastDate(nativeDate)
			}}
		/>
	)
}

[michelengelen]

The problem is that the introduction of UTC and timezones is faulty in Dayjs.
I would advice you to use moment instead:

import { useState } from 'react';
import { Moment } from 'moment';
import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker';
import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
import { LocalizationProvider } from '@mui/x-date-pickers';

const CompTest = () => {
  const [value, setValue] = useState<Moment | null>(null);
  return (
    <LocalizationProvider dateAdapter={AdapterMoment} adapterLocale={'de'}>
      <DesktopDatePicker
        value={value}
        onChange={(value) => {
          setValue(value);
        }}
      />
      <p>Date: {value?.toString()}</p>
    </LocalizationProvider>
  );
};

export default CompTest;

There are open issues on the dayjs packages (and even open PRs - one from me), but the maintainer seems to be inactive. Example PR

---

EDIT

Example with Luxon below: #11955 (comment)

[LukasTy]

I would advice you to use moment instead:

Would using luxon also work? 🤔
moment has been in maintenance mode for quite some time, IMHO, we should not be recommending users jump into this library at this point. 🙈

[michelengelen]

My apologies ... I was not aware that it is in maintenance mode. I just picked it because I am the most familiar with this package! :D
Of course you can also do this with luxon instead. Here is an example implementation for it:

import { useState } from 'react';
import { DateTime } from 'luxon';
import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker';
import { AdapterLuxon } from '@mui/x-date-pickers/AdapterLuxon';
import { LocalizationProvider } from '@mui/x-date-pickers';

const CompTest = () => {
  const [value, setValue] = useState<DateTime | null>(DateTime.utc(2024, 1, 1, 0, 0, 0, 0));
  return (
    <LocalizationProvider dateAdapter={AdapterLuxon} adapterLocale={'de'}>
      <DesktopDatePicker
        value={value}
        onChange={(value) => {
          setValue(value);
        }}
      />
      <p>Date: {value?.toString()}</p>
    </LocalizationProvider>
  );
};

export default CompTest;

[Olzindel]

Thanks for your replies!

Unfortunately, the project I am working on recently made the switch from moment to dayjs, and I can't make the switch to Luxon, because of the differences in API between Luxon and Dayjs.
I think I'm going to wait a release of a fix for this problem by DayJS mainteners and stay with the fix I sent in my previous message for the meantime.

[michelengelen]

Thanks for your replies!

Unfortunately, the project I am working on recently made the switch from moment to dayjs, and I can't make the switch to Luxon, because of the differences in API between Luxon and Dayjs. I think I'm going to wait a release of a fix for this problem by DayJS mainteners and stay with the fix I sent in my previous message for the meantime.

Good to hear that your solution for this is working for you. 👍🏼
And sorry that we could not help you in a better way! 🙇🏼

[michelengelen]

I will close this issue for now, but feel free to reopen if you have any further questions regarding this topic!