[v11.4.x] DateTimePicker: Fixes issue with date picker showing invalid date (#97971)

DateTimePicker: Fixes issue with date picker showing invalid date (#97888)

* DateTimePicker: Fixes issue with date picker showing invalid date

* Fix lint

(cherry picked from commit d93a5a7c53)

Co-authored-by: Torkel Ödegaard <torkel@grafana.com>

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;

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 });
   }