[pickers] Fix AdapterDayjs timezone behavior (@LukasTy) (#13373)

Signed-off-by: Lukas <[email protected]>
Co-authored-by: Lukas <[email protected]>

Author: github-actions[bot]

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';

packages/x-date-pickers/src/AdapterDayjs/AdapterDayjs.ts

@@ -285,8 +285,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;

test/e2e/fixtures/DatePicker/SingleDesktopDateRangePickerWithTZ.tsx

@@ -0,0 +1,22 @@
+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
+        slots={{ field: SingleInputDateRangeField }}
+        defaultValue={[dayjs('2024-04-12'), dayjs('2024-04-14')]}
+      />
+    </LocalizationProvider>
+  );
+}

test/e2e/index.test.ts

@@ -774,6 +774,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('textbox').click();
+
+        await page.getByRole('textbox').press('ArrowDown');
+
+        expect(thrownErrors).not.to.contain(
+          'MUI X: The timezone of the start and the end date should be the same.',
+        );
+      });
     });
   });
 });