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) => {