[pickers] How to set a global timezone on the pickers with dayjs

[d-s-j]

Order ID 💳

50497

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

The problem in depth 🔍

Hi there 👋 My team and I are currently trying to set a global timezone (UTC 00:00) for our entire React application. This is due to how the backend handles and serves dates: no times are included and is assumed to be UTC 00:00.

The expectation would be that regardless of your local timezone, a user interacting with the DateRangePicker from Tokyo should see the same highlighted today date as a user in San Francisco, as well as any dates selected.

Current behaviour viewing from San Francisco:

Current behaviour viewing from Tokyo:

I've provided a codebox demo of roughly how we're attempting to accomplish this, using the LocalizationProvider and passing dayjs.utc as the instance, which I understand is what the DateRangePicker will base it's dates from, but this raises the TypeError: Cannot read properties of undefined (reading 'en'). Any suggestions/feedback would be appreciated 🙏

Your environment 🌎

Codesandbox Demo

[flaviendelangle]

Hi,

The problem in your code is that dayjs.utc is not a valid dayjs instance.
That's sad because otherwise your approach would probably solve the UTC problem perfectly...

You can pass UTC dates in your initial value, and the components should not loose the UTC aspect when updating them (see this example).

But if you want to pass no initial date (which is of course a very valid use case), then our current API seem to be missing something...
The following hack seems to work.
I will try to see if we are able to somehow get the locale information (what is inside dayjs.Ls) from the UTC instance on our side 👍

[flaviendelangle]

Looking at the UTC plugin code, it seems that we can't get the dayjs main instance from it.
But maybe we don't need to use the custom dayjs instance passed to dateLibInstance when we try to get the localized formats.

The following diff should fix the problem, but we need to take a deeper look in case it breaks something:

--- a/packages/x-date-pickers/src/AdapterDayjs/index.ts
+++ b/packages/x-date-pickers/src/AdapterDayjs/index.ts
@@ -1,4 +1,4 @@
-import { Dayjs } from 'dayjs';
+import dayjs, { Dayjs } from 'dayjs';
 import BaseAdapterDayjs from '@date-io/dayjs';
 import { MuiFormatTokenMap, MuiPickerFieldAdapter } from '../internals/models';
 import { buildWarning } from '../internals/utils/warning';
@@ -39,13 +39,12 @@ export class AdapterDayjs extends BaseAdapterDayjs implements MuiPickerFieldAdap
    * We should use this one in the future to support all localized formats.
    */
   public expandFormat = (format: string) => {
-    const localeObject = this.rawDayJsInstance.Ls[this.locale || 'en'];
+    const localeObject = dayjs.Ls[this.locale || 'en'];
 
     if (localeObject === undefined) {
       localeNotFoundWarning();
     }
-    const localeFormats =
-      localeObject === undefined ? this.rawDayJsInstance.Ls.en.formats : localeObject.formats;
+    const localeFormats = localeObject === undefined ? dayjs.Ls.en.formats : localeObject.formats;
 
     // @see https://github.com/iamkun/dayjs/blob/dev/src/plugin/localizedFormat/index.js
     const t = (formatBis: string) =>

Side note: Ths dateLibInstance approach will probably not work for dayjs.tz, we need to rework our timezone approach because it is very bad...

[Semigradsky]

I have the same issue (incorrect today highlight) and I 'fixed' it by overriding renderDay for passing my calculated today value to PickersDay. But it doesn't work for month/year because we can't customize them yet - #4662