From d93a5a7c534874869762015581e2bea1e9d00e23 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Fri, 13 Dec 2024 19:23:26 +0100
Subject: [PATCH] DateTimePicker: Fixes issue with date picker showing invalid
 date (#97888)

* DateTimePicker: Fixes issue with date picker showing invalid date

* Fix lint
---
 .../TimeRangePicker/TimeRangeContent.test.tsx | 30 ++++++++++++++++++-
 .../TimeRangePicker/TimeRangeContent.tsx      |  2 +-
 2 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeContent.test.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeContent.test.tsx
index 99f9df99a20..90777bfa3aa 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeContent.test.tsx
+++ b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeContent.test.tsx
@@ -1,7 +1,7 @@
 import { fireEvent, render, RenderResult } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import { dateTimeParse, TimeRange } from '@grafana/data';
+import { dateTimeParse, systemDateFormats, TimeRange } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 
 import { TimeRangeContent } from './TimeRangeContent';
@@ -93,6 +93,34 @@ describe('TimeRangeForm', () => {
     expect(getByLabelText('To')).toHaveValue('2021-06-19 19:59:00');
   });
 
+  describe('Given custom system date format', () => {
+    const originalFullDate = systemDateFormats.fullDate;
+    beforeEach(() => {
+      systemDateFormats.fullDate = 'DD.MM.YYYY HH:mm:ss';
+    });
+
+    afterAll(() => {
+      systemDateFormats.fullDate = originalFullDate;
+    });
+
+    it('should parse UTC iso strings and render in current timezone', () => {
+      const { getByLabelText } = setup(
+        {
+          from: defaultTimeRange.from,
+          to: defaultTimeRange.to,
+          raw: {
+            from: defaultTimeRange.from.toISOString(),
+            to: defaultTimeRange.to.toISOString(),
+          },
+        },
+        'America/New_York'
+      );
+
+      expect(getByLabelText('From')).toHaveValue('16.06.2021 20:00:00');
+      expect(getByLabelText('To')).toHaveValue('19.06.2021 19:59:00');
+    });
+  });
+
   it('should close calendar when clicking the close icon', () => {
     const { queryByLabelText, getAllByRole, getByRole } = setup();
     const { TimePicker } = selectors.components;
diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeContent.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeContent.tsx
index a23da6f7a62..eafb4b92df1 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeContent.tsx
+++ b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeContent.tsx
@@ -269,7 +269,7 @@ function valueAsString(value: DateTime | string, timeZone?: TimeZone): string {
   }
 
   if (value.endsWith('Z')) {
-    const dt = dateTimeParse(value, { timeZone: 'utc' });
+    const dt = dateTimeParse(value, { timeZone: 'utc', format: 'YYYY-MM-DDTHH:mm:ss.SSSZ' });
     return dateTimeFormat(dt, { timeZone });
   }