TimePicker: Support strings in ISO formats (#93479)

* TimePicker: Support strings in ISO formats

* changed fix and added test

packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeContent.test.tsx

@@ -76,6 +76,23 @@ describe('TimeRangeForm', () => {
     expect(getByLabelText('To')).toHaveValue(toValue);
   });
 
+  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('2021-06-16 20:00:00');
+    expect(getByLabelText('To')).toHaveValue('2021-06-19 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

@@ -267,6 +267,12 @@ function valueAsString(value: DateTime | string, timeZone?: TimeZone): string {
   if (isDateTime(value)) {
     return dateTimeFormat(value, { timeZone });
   }
+
+  if (value.endsWith('Z')) {
+    const dt = dateTimeParse(value, { timeZone: 'utc' });
+    return dateTimeFormat(dt, { timeZone });
+  }
+
   return value;
 }