From faebf90c88bd9c6189d073f0747090f581172c3e Mon Sep 17 00:00:00 2001
From: Nixon Yiu <yiunixon@gmail.com>
Date: Wed, 11 Dec 2024 21:34:52 -0800
Subject: [PATCH] [@mantine/dates] Fix timezone not being applied to the
 formatted value (#7162)

* pass timezone when formatting value

* fix test
---
 .../DateTimePicker/DateTimePicker.test.tsx    | 23 +++++++++++++------
 .../DateTimePicker/DateTimePicker.tsx         |  2 +-
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/packages/@mantine/dates/src/components/DateTimePicker/DateTimePicker.test.tsx b/packages/@mantine/dates/src/components/DateTimePicker/DateTimePicker.test.tsx
index 6b0dd52f922..3b1d2d573f8 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(
       <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
index 46956b17052..110fd690536 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<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>) => {