[pickerts] not correctly setting the date time using dayjs with timezone about mui-x HOT 8 CLOSED

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.

from mui-x.

I encountered the same issue 😔

from mui-x.

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)
			}}
		/>
	)
}

from mui-x.

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;

from mui-x.

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! 🙇🏼

from mui-x.

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)

from mui-x.

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. 🙈

from mui-x.

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

from mui-x.