-
-
Notifications
You must be signed in to change notification settings - Fork 1.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[pickers] How to set a global timezone on the pickers with dayjs
#6948
Comments
Hi, The problem in your code is that 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... |
dayjs
dayjs
dayjs
Looking at the UTC plugin code, it seems that we can't get the dayjs main instance from it. 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 |
I have the same issue (incorrect |
Order ID 💳
50497
Duplicates
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 passingdayjs.utc
as the instance, which I understand is what theDateRangePicker
will base it's dates from, but this raises theTypeError
:Cannot read properties of undefined (reading 'en')
. Any suggestions/feedback would be appreciated 🙏Your environment 🌎
Codesandbox Demo
The text was updated successfully, but these errors were encountered: