Skip to content

Commit

Permalink
[pickers] Fix AdapterDayjs timezone behavior (mui#13362)
Browse files Browse the repository at this point in the history
  • Loading branch information
LukasTy authored Jun 4, 2024
1 parent fd3385a commit 13f286c
Show file tree
Hide file tree
Showing 4 changed files with 52 additions and 4 deletions.
4 changes: 2 additions & 2 deletions docs/data/date-pickers/timezone/timezone.md
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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';
Expand Down
7 changes: 5 additions & 2 deletions packages/x-date-pickers/src/AdapterDayjs/AdapterDayjs.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Original file line number Diff line number Diff line change
@@ -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>
);
}
22 changes: 22 additions & 0 deletions test/e2e/index.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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.',
);
});
});
});
});
Expand Down

0 comments on commit 13f286c

Please sign in to comment.