fix: Format date localized

pages/date-range-picker/with-default-date-only.page.tsx

@@ -0,0 +1,45 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useState } from 'react';
+
+import { Box, DateRangePicker, DateRangePickerProps, FormField, Link } from '~components';
+
+import ScreenshotArea from '../utils/screenshot-area';
+import { i18nStrings, isValid, relativeOptions } from './common';
+
+export default function DatePickerScenario() {
+  const [value, setValue] = useState<DateRangePickerProps['value']>({
+    type: 'absolute',
+    startDate: '2018-01-09T12:34:56Z',
+    endDate: '2018-01-19T15:30:00Z',
+  });
+
+  return (
+    <Box padding="s">
+      <h1>Date range picker with selected date</h1>
+      <Link id="focus-dismiss-helper">Focusable element before the date range picker</Link>
+      <br />
+      <br />
+      <ScreenshotArea>
+        <FormField label="Date Range Picker field">
+          <DateRangePicker
+            value={value}
+            locale={'en-GB'}
+            i18nStrings={i18nStrings}
+            timeOffset={0}
+            placeholder={'Filter by a date and time range'}
+            onChange={e => setValue(e.detail.value)}
+            relativeOptions={relativeOptions}
+            isValidRange={isValid}
+            customRelativeRangeUnits={['second', 'minute', 'hour']}
+            dateOnly={true}
+            absoluteFormat="long-localized"
+          />
+        </FormField>
+        <br />
+        <br />
+        <div style={{ blockSize: 500 }} />
+      </ScreenshotArea>
+    </Box>
+  );
+}

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

@@ -0,0 +1,41 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import useBrowser from '@cloudscape-design/browser-test-tools/use-browser';
+
+import createWrapper from '../../../lib/components/test-utils/selectors';
+import DateRangePickerPage from './page-objects/date-range-picker-page';
+
+describe('Date Range Picker in America/Los_Angeles timezone', () => {
+  const setupTest = (testFn: (page: DateRangePickerPage) => Promise<void>) => {
+    return useBrowser(async browser => {
+      const page = new DateRangePickerPage(createWrapper().findDateRangePicker().getElement(), browser);
+      await browser.setTimeZone('America/Los_Angeles');
+      await browser.url('#/light/date-range-picker/with-default-date-only');
+      await page.waitForLoad();
+      await testFn(page);
+    });
+  };
+
+  test(
+    'Selecting a date',
+    setupTest(async page => {
+      await page.focusTrigger();
+      await page.keys('Enter');
+
+      // Focus grid
+      await page.keys(['Tab', 'Tab', 'Tab', 'Tab']);
+
+      await page.keys('ArrowDown');
+      await page.keys('Enter');
+
+      await page.keys(['ArrowDown', 'ArrowRight']);
+      await page.keys('Enter');
+
+      // Focus Apply button
+      await page.keys(['Tab', 'Tab', 'Tab', 'Tab', 'Tab']);
+      await page.keys('Enter');
+
+      await expect(page.getTriggerText()).resolves.toBe('16 January 2018 — 24 January 2018');
+    })
+  );
+});

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

@@ -1,5 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
+import { isValid, parseISO } from 'date-fns';
 
 import { formatTimeOffsetLocalized } from './format-time-offset';
 
@@ -16,7 +17,11 @@ export default function formatDateLocalized({
   timeOffset?: number;
   locale?: string;
 }) {
-  const date = new Date(isoDate);
+  let date = parseISO(isoDate);
+  // if the date is not ISO formatted, fallback to built-in date parsing
+  if (!isValid(date)) {
+    date = new Date(isoDate);
+  }
 
   const formattedDate = new Intl.DateTimeFormat(locale, {
     day: 'numeric',