feat: Use succinct UTC time zone offset: "+00:00" -> "Z" (take 2) (#3787)

Author: TrevorBurnham

src/date-range-picker/__integ__/date-range-picker.test.ts

@@ -39,7 +39,7 @@ describe('Date Range Picker', () => {
         await page.keys('Enter');
 
         await expect(page.getTriggerText()).resolves.toBe(
-          granularity === 'day' ? '2018-01-16T00:00:00+00:00 — 2018-01-24T23:59:59+00:00' : '2018-01 — 2018-01'
+          granularity === 'day' ? '2018-01-16T00:00:00Z — 2018-01-24T23:59:59Z' : '2018-01 — 2018-01'
         );
       }, granularity)
     );
@@ -65,7 +65,7 @@ describe('Date Range Picker', () => {
         await page.keys('Enter');
 
         await expect(page.getTriggerText()).resolves.toBe(
-          granularity === 'day' ? '2018-01-17T00:00:00+00:00 — 2018-01-19T15:30:00+00:00' : '2018-01 — 2018-01'
+          granularity === 'day' ? '2018-01-17T00:00:00Z — 2018-01-19T15:30:00Z' : '2018-01 — 2018-01'
         );
       }, granularity)
     );

src/date-range-picker/__tests__/time-offset.test.ts

@@ -59,14 +59,14 @@ describe('Date range picker', () => {
           { type: 'absolute', startDate: '2020-10-11T23:23:45', endDate: '2020-10-12T08:23:45' },
         ],
         [
-          'UTC and +00:00 with negative offset',
-          { type: 'absolute', startDate: '2020-10-12T01:23:45Z', endDate: '2020-10-12T01:23:45+00:00' },
+          'UTC and Z with negative offset',
+          { type: 'absolute', startDate: '2020-10-12T01:23:45Z', endDate: '2020-10-12T01:23:45Z' },
           { startDate: -240, endDate: -240 },
           { type: 'absolute', startDate: '2020-10-11T21:23:45', endDate: '2020-10-11T21:23:45' },
         ],
         [
           'UTC with mixed offsets',
-          { type: 'absolute', startDate: '2020-10-12T01:23:45Z', endDate: '2020-10-12T01:23:45+00:00' },
+          { type: 'absolute', startDate: '2020-10-12T01:23:45Z', endDate: '2020-10-12T01:23:45Z' },
           { startDate: 120, endDate: -240 },
           { type: 'absolute', startDate: '2020-10-12T03:23:45', endDate: '2020-10-11T21:23:45' },
         ],

src/date-range-picker/__tests__/utils.test.ts

@@ -215,8 +215,8 @@ describe('DateRangePicker utils', () => {
 
       const expected = {
         type: 'absolute',
-        startDate: '2023-06-15T00:00:00Z+60000:00',
-        endDate: '2023-07-20T23:59:59Z+120000:00',
+        startDate: '2023-06-15T00:00:00+60000:00',
+        endDate: '2023-07-20T23:59:59+120000:00',
       };
 
       const result = formatValue(input as DateRangePickerProps.Value, { ...defaultOptions, timeOffset });
@@ -235,8 +235,8 @@ describe('DateRangePicker utils', () => {
 
       const expected = {
         type: 'absolute',
-        startDate: '2023-06-15T00:00:00Z+00:00',
-        endDate: '2023-07-20T23:59:59Z+00:00',
+        startDate: '2023-06-15T00:00:00+00:00',
+        endDate: '2023-07-20T23:59:59+00:00',
       };
 
       const result = formatValue(input as DateRangePickerProps.Value, { ...defaultOptions, timeOffset });

src/date-range-picker/time-offset.ts

@@ -4,11 +4,11 @@ import { addMinutes } from 'date-fns';
 
 import { warnOnce } from '@cloudscape-design/component-toolkit/internal';
 
-import { formatTimeOffsetISO, parseTimezoneOffset, shiftTimezoneOffset } from '../internal/utils/date-time';
+import { formatTimeOffsetISOInternal, parseTimezoneOffset, shiftTimezoneOffset } from '../internal/utils/date-time';
 import { DateRangePickerProps } from './interfaces';
 
 /**
- * Appends a time zone offset to an offset-less date string.
+ * Appends a time zone offset to a date string, replacing any existing timezone information.
  */
 export function setTimeOffset(
   value: DateRangePickerProps.Value | null,
@@ -17,10 +17,16 @@ export function setTimeOffset(
   if (!(value?.type === 'absolute')) {
     return value;
   }
+
+  const stripTimezone = (dateString: string): string => {
+    // Remove existing timezone info: Z, +HH:MM, -HH:MM, +HHMM, -HHMM
+    return dateString.replace(/[Z]$|[+-]\d{2}:?\d{2}$/, '');
+  };
+
   return {
     type: 'absolute',
-    startDate: value.startDate + formatTimeOffsetISO(value.startDate, timeOffset.startDate),
-    endDate: value.endDate + formatTimeOffsetISO(value.endDate, timeOffset.endDate),
+    startDate: stripTimezone(value.startDate) + formatTimeOffsetISOInternal(value.startDate, timeOffset.startDate),
+    endDate: stripTimezone(value.endDate) + formatTimeOffsetISOInternal(value.endDate, timeOffset.endDate),
   };
 }
 

src/internal/utils/date-time/__tests__/format-date-iso.test.ts

@@ -7,7 +7,7 @@ describe('formatDateISO', () => {
   let formatTimeOffsetISOMock: jest.SpyInstance;
 
   beforeEach(() => {
-    formatTimeOffsetISOMock = jest.spyOn(formatTimeOffsetModule, 'formatTimeOffsetISO').mockReturnValue('+00:00');
+    formatTimeOffsetISOMock = jest.spyOn(formatTimeOffsetModule, 'formatTimeOffsetISO').mockReturnValue('Z');
   });
 
   afterEach(() => {
@@ -55,7 +55,7 @@ describe('formatDateISO', () => {
       isMonthOnly: false,
     });
 
-    expect(result).toBe('2023-06-15T12:00:00+00:00');
+    expect(result).toBe('2023-06-15T12:00:00Z');
     expect(formatTimeOffsetISOMock).toHaveBeenCalledWith('2023-06-15T12:00:00', undefined);
   });
 

src/internal/utils/date-time/__tests__/format-date-localized.test.ts

@@ -6,7 +6,7 @@ import * as formatTimeOffsetModule from '../format-time-offset';
 describe('formatDateLocalized', () => {
   beforeEach(() => {
     jest.clearAllMocks();
-    jest.spyOn(formatTimeOffsetModule, 'formatTimeOffsetLocalized').mockReturnValue('UTC+00:00');
+    jest.spyOn(formatTimeOffsetModule, 'formatTimeOffsetLocalized').mockReturnValue('(UTC)');
   });
 
   afterEach(() => {
@@ -32,7 +32,7 @@ describe('formatDateLocalized', () => {
       locale: 'en-US',
     });
 
-    expect(result).toMatch(/^June 15, 2023, 12:00:00 UTC\+00:00$/);
+    expect(result).toMatch(/^June 15, 2023, 12:00:00 \(UTC\)$/);
   });
 
   test('formats date only when isDateOnly is true', () => {
@@ -66,7 +66,7 @@ describe('formatDateLocalized', () => {
       locale: 'ja',
     });
 
-    expect(result).toMatch(/^2023年6月15日 12:00:00 UTC\+00:00$/);
+    expect(result).toMatch(/^2023年6月15日 12:00:00 \(UTC\)$/);
   });
 
   test('handles non-ISO formatted date strings', () => {
@@ -77,7 +77,7 @@ describe('formatDateLocalized', () => {
       locale: 'en-US',
     });
 
-    expect(result).toMatch(/^June 15, 2023, 12:00:00 UTC\+00:00$/);
+    expect(result).toMatch(/^June 15, 2023, 12:00:00 \(UTC\)$/);
   });
 
   //todo  determine how to handle this failing

src/internal/utils/date-time/__tests__/format-date-time-with-offset.test.ts

@@ -63,7 +63,7 @@ describe('formatDateTimeWithOffset', () => {
           date: '2020-01-01T00:00:00',
           timeOffset: regional,
           expected: {
-            iso: '2020-01-01T00:00:00+00:00',
+            iso: '2020-01-01T00:00:00Z',
             localized: { 'en-US': 'January 1, 2020, 00:00:00 (UTC)' },
           },
         },

src/internal/utils/date-time/__tests__/format-time-offset.test.ts

@@ -6,6 +6,11 @@ import { formatTimeOffsetISO } from '../../../../../lib/components/internal/util
 test('formatTimeOffsetISO', () => {
   for (let offset = -120; offset <= 120; offset++) {
     const formatted = formatTimeOffsetISO('2020-01-01', offset);
+    if (offset === 0) {
+      expect(formatted).toBe('Z');
+      continue;
+    }
+
     const sign = Number(formatted[0] + '1');
     const hours = Number(formatted[1] + formatted[2]);
     const minutes = Number(formatted[4] + formatted[5]);

src/internal/utils/date-time/format-time-offset.ts

@@ -3,8 +3,31 @@
 
 import { padLeftZeros } from '../strings';
 
+/**
+ * Formats timezone offset values used in for APIs, maintaining backward compatibility. Always
+ * returns "+HH:MM" format, even for UTC ("+00:00"). Used by onChange events to preserve existing
+ * API behavior.
+ */
+export function formatTimeOffsetISOInternal(isoDate: string, offsetInMinutes?: number) {
+  offsetInMinutes = defaultToLocal(isoDate, offsetInMinutes);
+  const { hours, minutes } = getMinutesAndHours(offsetInMinutes);
+
+  const sign = offsetInMinutes < 0 ? '-' : '+';
+  const formattedOffset = `${sign}${formatISO2Digits(hours)}:${formatISO2Digits(minutes)}`;
+
+  return formattedOffset;
+}
+
+/**
+ * Formats timezone offset for display purposes using succinct UTC notation.
+ * Returns "Z" for UTC, "+HH:MM" for other offsets.
+ * Used for visual display in components like date-range-picker trigger text.
+ */
 export function formatTimeOffsetISO(isoDate: string, offsetInMinutes?: number) {
   offsetInMinutes = defaultToLocal(isoDate, offsetInMinutes);
+  if (offsetInMinutes === 0) {
+    return 'Z';
+  }
   const { hours, minutes } = getMinutesAndHours(offsetInMinutes);
 
   const sign = offsetInMinutes < 0 ? '-' : '+';

src/internal/utils/date-time/index.ts

@@ -6,7 +6,7 @@ export { formatDateTimeWithOffset } from './format-date-time-with-offset';
 export { formatDate } from './format-date';
 export { formatTime } from './format-time';
 export { formatDateTime } from './format-date-time';
-export { formatTimeOffsetISO } from './format-time-offset';
+export { formatTimeOffsetISO, formatTimeOffsetISOInternal } from './format-time-offset';
 export { isIsoDateOnly, isIsoMonthOnly } from './is-iso-only';
 export { joinDateTime, splitDateTime } from './join-date-time';
 export { parseDate } from './parse-date';