[pickers] Fix AdapterDayjs timezone behavior (#13362)

mui · Jun 4, 2024 · 13f286c · 13f286c
1 parent fd3385a
commit 13f286c
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 4 deletions.
diff --git a/docs/data/date-pickers/timezone/timezone.md b/docs/data/date-pickers/timezone/timezone.md
@@ -190,7 +190,7 @@ Please check out the documentation of the [UTC and timezone on Luxon](https://mo
 You can then pass your UTC date to your picker:
 
 ```tsx
-import { DateTime, Settings } from 'luxon';
+import { DateTime } from 'luxon';
 
 import { AdapterLuxon } from '@mui/x-date-pickers/AdapterLuxon';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
@@ -240,7 +240,7 @@ Please check out the documentation of the [UTC and timezone on Luxon](https://mo
 You can then pass your date in the wanted timezone to your picker:
 
 ```tsx
-import { DateTime, Settings } from 'luxon';
+import { DateTime } from 'luxon';
 
 import { AdapterLuxon } from '@mui/x-date-pickers/AdapterLuxon';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';

diff --git a/packages/x-date-pickers/src/AdapterDayjs/AdapterDayjs.ts b/packages/x-date-pickers/src/AdapterDayjs/AdapterDayjs.ts
@@ -280,8 +280,11 @@ export class AdapterDayjs implements MuiPickersAdapter<Dayjs, string> {
       if ((fixedValue.$offset ?? 0) === (value.$offset ?? 0)) {
         return value;
       }
-
-      return fixedValue;
+      // Change only what is needed to avoid creating a new object with unwanted data
+      // Especially important when used in an environment where utc or timezone dates are used only in some places
+      // Reference: https://github.com/mui/mui-x/issues/13290
+      // @ts-ignore
+      value.$offset = fixedValue.$offset;
     }
 
     return value;

diff --git a/test/e2e/fixtures/DatePicker/SingleDesktopDateRangePickerWithTZ.tsx b/test/e2e/fixtures/DatePicker/SingleDesktopDateRangePickerWithTZ.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
+import timezone from 'dayjs/plugin/timezone';
+import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { SingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDateRangeField';
+
+dayjs.extend(utc);
+dayjs.extend(timezone);
+
+export default function BasicDesktopDateRangePicker() {
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <DateRangePicker
+        enableAccessibleFieldDOMStructure
+        slots={{ field: SingleInputDateRangeField }}
+        defaultValue={[dayjs('2024-04-12'), dayjs('2024-04-14')]}
+      />
+    </LocalizationProvider>
+  );
+}
diff --git a/test/e2e/index.test.ts b/test/e2e/index.test.ts
@@ -1009,6 +1009,28 @@ async function initializeEnvironment(
 
         expect(await page.getByRole('textbox').inputValue()).to.equal('04/11/2022 – 04/13/2022');
       });
+
+      it('should not change timezone when changing the start date from non DST to DST', async () => {
+        // firefox in CI is not happy with this test
+        if (browserType.name() === 'firefox') {
+          return;
+        }
+        const thrownErrors: string[] = [];
+        context.on('weberror', (webError) => {
+          thrownErrors.push(webError.error().message);
+        });
+
+        await renderFixture('DatePicker/SingleDesktopDateRangePickerWithTZ');
+
+        // open the picker
+        await page.getByRole('group').click();
+
+        await page.getByRole('spinbutton', { name: 'Month' }).first().press('ArrowDown');
+
+        expect(thrownErrors).not.to.contain(
+          'MUI X: The timezone of the start and the end date should be the same.',
+        );
+      });
     });
   });
 });