[@mantine/dates] Fix timezone not being applied to the formatted value (

#7162) * pass timezone when formatting value * fix test
mantinedev · Dec 12, 2024 · faebf90 · faebf90
1 parent 9f2ff9b
commit faebf90
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 8 deletions.
diff --git 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(
       <DatesProvider settings={{ timezone: 'UTC' }}>
-        <DateTimePicker {...defaultProps} defaultValue={new Date(2022, 0, 31, 23)} />
+        <DateTimePicker
+          {...defaultProps}
+          defaultValue={new Date(2022, 0, 31, 23)}
+          valueFormat="DD/MM/YYYY HH:mm Z"
+        />
       </DatesProvider>
     );
-    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(
       <DatesProvider settings={{ timezone: 'UTC' }}>
-        <DateTimePicker {...defaultProps} value={new Date(2022, 0, 31, 23)} onChange={spy} />
+        <DateTimePicker
+          {...defaultProps}
+          value={new Date(2022, 0, 31, 23)}
+          onChange={spy}
+          valueFormat="DD/MM/YYYY HH:mm Z"
+        />
       </DatesProvider>
     );
-    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
@@ -151,7 +151,7 @@ export const DateTimePicker = factory<DateTimePickerFactory>((_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<HTMLInputElement>) => {