diff --git a/packages/@mantine/dates/src/components/DateTimePicker/DateTimePicker.test.tsx b/packages/@mantine/dates/src/components/DateTimePicker/DateTimePicker.test.tsx
index 6b0dd52f92..3b1d2d573f 100644
--- a/packages/@mantine/dates/src/components/DateTimePicker/DateTimePicker.test.tsx
+++ b/packages/@mantine/dates/src/components/DateTimePicker/DateTimePicker.test.tsx
@@ -185,18 +185,22 @@ describe('@mantine/dates/DateTimePicker', () => {
it('supports uncontrolled state with timezone', async () => {
const { container } = render(
-
+
);
- expectValue(container, '01/02/2022 04:00');
+ expectValue(container, '01/02/2022 09:00 +00:00');
await clickInput(container);
await userEvent.click(container.querySelectorAll('table button')[6]);
- expectValue(container, '06/02/2022 04:00');
+ expectValue(container, '06/02/2022 09:00 +00:00');
await userEvent.clear(getTimeInput());
await userEvent.type(getTimeInput(), '14:45');
- expectValue(container, '06/02/2022 14:45');
+ expectValue(container, '06/02/2022 19:45 +00:00');
});
it('supports controlled state', async () => {
@@ -217,14 +221,19 @@ describe('@mantine/dates/DateTimePicker', () => {
const { container } = render(
-
+
);
- expectValue(container, '01/02/2022 04:00');
+ expectValue(container, '01/02/2022 09:00 +00:00');
await clickInput(container);
await userEvent.click(container.querySelectorAll('table button')[6]);
- expectValue(container, '01/02/2022 04:00');
+ expectValue(container, '01/02/2022 09:00 +00:00');
expect(spy).toHaveBeenLastCalledWith(new Date(2022, 1, 5, 23));
});
diff --git a/packages/@mantine/dates/src/components/DateTimePicker/DateTimePicker.tsx b/packages/@mantine/dates/src/components/DateTimePicker/DateTimePicker.tsx
index 46956b1705..110fd69053 100644
--- a/packages/@mantine/dates/src/components/DateTimePicker/DateTimePicker.tsx
+++ b/packages/@mantine/dates/src/components/DateTimePicker/DateTimePicker.tsx
@@ -151,7 +151,7 @@ export const DateTimePicker = factory((_props, ref) => {
const [dropdownOpened, dropdownHandlers] = useDisclosure(false);
const formattedValue = _value
- ? dayjs(_value).locale(ctx.getLocale(locale)).format(_valueFormat)
+ ? dayjs(_value).locale(ctx.getLocale(locale)).tz(ctx.getTimezone()).format(_valueFormat)
: '';
const handleTimeChange = (event: React.ChangeEvent) => {