Skip to content
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] Fix AdapterDayjs timezone behavior #13362

Merged
merged 4 commits into from
Jun 4, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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