feat: Adding custom date formats

pages/date-input/common.ts

@@ -0,0 +1,6 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+export const generatePlaceholder = (monthOnly: boolean, isIso: boolean) => {
+  const separator = isIso ? '-' : '/';
+  return `YYYY${separator}${monthOnly ? 'MM' : 'MM' + separator + 'DD'}`;
+};

pages/date-input/day-permutations.page.tsx

@@ -0,0 +1,56 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import Box from '~components/box';
+import DateInput, { DateInputProps } from '~components/date-input';
+
+import createPermutations from '../utils/permutations';
+import PermutationsView from '../utils/permutations-view';
+import ScreenshotArea from '../utils/screenshot-area';
+import { generatePlaceholder } from './common';
+
+const permutations = createPermutations<DateInputProps>([
+  {
+    value: ['', '2020-01-01'],
+    placeholder: ['', 'applied'],
+    format: ['slashed', 'iso', 'long-localized'],
+    inputFormat: ['slashed', 'iso'],
+    ariaLabel: ['Some label'],
+    invalid: [false, true],
+    readOnly: [false, true],
+    disabled: [false, true],
+  },
+]);
+
+export default function DateInputPermutations() {
+  return (
+    <Box padding="l">
+      <h1>Date Input permutations</h1>
+      <ScreenshotArea disableAnimations={true}>
+        <PermutationsView
+          permutations={permutations}
+          render={permutation => (
+            <DateInput
+              onChange={() => {
+                /*empty handler to suppress react controlled property warning*/
+              }}
+              {...permutation}
+              granularity="day"
+              locale="en-US"
+              placeholder={
+                permutation.placeholder
+                  ? generatePlaceholder(
+                      false,
+                      permutation.format === 'iso' ||
+                        (permutation.format === 'long-localized' && permutation.inputFormat === 'iso')
+                    )
+                  : ''
+              }
+            />
+          )}
+        />
+      </ScreenshotArea>
+    </Box>
+  );
+}

pages/date-input/localization-permutations.page.tsx

@@ -0,0 +1,60 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import Box from '~components/box';
+import DateInput, { DateInputProps } from '~components/date-input';
+
+import createPermutations from '../utils/permutations';
+import PermutationsView from '../utils/permutations-view';
+import ScreenshotArea from '../utils/screenshot-area';
+
+const locales = [
+  'ar',
+  'de',
+  'en-GB',
+  'en-US',
+  'es',
+  'fr',
+  'he',
+  'id',
+  'it',
+  'ja',
+  'ko',
+  'ms',
+  'pt-BR',
+  'th',
+  'tr',
+  'vi',
+  'zh-CN',
+  'zh-TW',
+];
+const permutations = createPermutations<DateInputProps>([
+  {
+    value: ['2020-01-01'],
+    format: ['long-localized'],
+    locale: [...locales],
+    granularity: ['day', 'month'],
+  },
+]);
+
+export default function DateInputPermutations() {
+  return (
+    <Box padding="l">
+      <h1>Date Input permutations</h1>
+      <ScreenshotArea disableAnimations={true}>
+        <PermutationsView
+          permutations={permutations}
+          render={permutation => (
+            <DateInput
+              onChange={() => {
+                /*empty handler to suppress react controlled property warning*/
+              }}
+              {...permutation}
+            />
+          )}
+        />
+      </ScreenshotArea>
+    </Box>
+  );
+}

pages/date-input/month-permutations.page.tsx

@@ -0,0 +1,56 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import Box from '~components/box';
+import DateInput, { DateInputProps } from '~components/date-input';
+
+import createPermutations from '../utils/permutations';
+import PermutationsView from '../utils/permutations-view';
+import ScreenshotArea from '../utils/screenshot-area';
+import { generatePlaceholder } from './common';
+
+const permutations = createPermutations<DateInputProps>([
+  {
+    value: ['', '2020-01'],
+    placeholder: ['', 'applied'],
+    format: ['slashed', 'iso', 'long-localized'],
+    inputFormat: ['slashed', 'iso'],
+    ariaLabel: ['Some label'],
+    invalid: [false, true],
+    readOnly: [false, true],
+    disabled: [false, true],
+  },
+]);
+
+export default function DateInputPermutations() {
+  return (
+    <Box padding="l">
+      <h1>Date Input permutations</h1>
+      <ScreenshotArea disableAnimations={true}>
+        <PermutationsView
+          permutations={permutations}
+          render={permutation => (
+            <DateInput
+              onChange={() => {
+                /*empty handler to suppress react controlled property warning*/
+              }}
+              {...permutation}
+              granularity="month"
+              locale="en-US"
+              placeholder={
+                permutation.placeholder
+                  ? generatePlaceholder(
+                      true,
+                      permutation.format === 'iso' ||
+                        (permutation.format === 'long-localized' && permutation.inputFormat === 'iso')
+                    )
+                  : ''
+              }
+            />
+          )}
+        />
+      </ScreenshotArea>
+    </Box>
+  );
+}

pages/date-input/simple.page.tsx

@@ -12,14 +12,27 @@ export type DateInputDemoContext = React.Context<
   AppContextType<{
     monthOnly?: boolean;
     hasValue?: boolean;
+    readonly?: boolean;
+    disabled?: boolean;
+    inputFormat?: DateInputProps.InputFormat | '';
+    format?: DateInputProps.Format | '';
+    locale?: DateInputProps['locale'] | '';
   }>
 >;
 
 export default function DateInputScenario() {
   const { urlParams, setUrlParams } = useContext(AppContext as DateInputDemoContext);
-  const initValue = '2025-02-14';
+  const initValue = '2025/02/14';
   const hasValue = urlParams.hasValue ?? false;
+  const inputFormat = urlParams.inputFormat ?? '';
+  const disabled = urlParams.disabled ?? false;
+  const readonly = urlParams.readonly ?? false;
+  const format = urlParams.format ?? '';
+  const locale = urlParams.locale ?? 'en-US';
+  const monthOnly = urlParams.monthOnly ?? false;
   const [value, setValue] = useState<DateInputProps['value']>('');
+  const isIso = format === 'iso' || (format === 'long-localized' && inputFormat === 'iso');
+  const inputFormatPlaceholderText = `YYYY${isIso ? '-' : '/'}MM${monthOnly ? `` : `${isIso ? '-' : '/'}DD`}`;
 
   useEffect(() => {
     if (hasValue) {
@@ -37,14 +50,85 @@ export default function DateInputScenario() {
           <Checkbox checked={hasValue} onChange={({ detail }) => setUrlParams({ hasValue: detail.checked })}>
             Has initial value
           </Checkbox>
+          <Checkbox checked={readonly} onChange={({ detail }) => setUrlParams({ readonly: detail.checked })}>
+            Read-only
+          </Checkbox>
+          <Checkbox checked={disabled} onChange={({ detail }) => setUrlParams({ disabled: detail.checked })}>
+            Disabled
+          </Checkbox>
+          <Checkbox checked={monthOnly} onChange={({ detail }) => setUrlParams({ monthOnly: detail.checked })}>
+            Month-only
+          </Checkbox>
+          <label>
+            Format
+            <select
+              value={format}
+              onChange={event =>
+                setUrlParams({
+                  format: event.currentTarget.value as DateInputProps.InputFormat,
+                })
+              }
+            >
+              <option value="slashed">Slashed (Default)</option>
+              <option value="iso">Iso</option>
+              <option value="long-localized">Long localized</option>
+            </select>
+          </label>
+          <label>
+            Input format
+            <select
+              value={inputFormat}
+              disabled={format !== 'long-localized'}
+              onChange={event =>
+                setUrlParams({
+                  inputFormat: event.currentTarget.value as DateInputProps.InputFormat,
+                })
+              }
+            >
+              <option value="slashed">Slashed (Default)</option>
+              <option value="iso">Iso</option>
+            </select>
+          </label>
+          <label>
+            Locale
+            <select
+              value={locale}
+              onChange={event =>
+                setUrlParams({
+                  locale: event.currentTarget.value as DateInputProps['locale'],
+                })
+              }
+            >
+              <option value="ar">ar</option>
+              <option value="en-US">en-US</option>
+              <option value="en-GB">en-GB</option>
+              <option value="de">de</option>
+              <option value="es">es</option>
+              <option value="fr">fr</option>
+              <option value="it">it</option>
+              <option value="ja">ja</option>
+              <option value="ko">ko</option>
+              <option value="tr">tr</option>
+              <option value="pt-BR">pt-BR</option>
+              <option value="ru">ru</option>
+              <option value="zh-CN">zh-CN</option>
+              <option value="zh-TW">zh-TW</option>
+            </select>
+          </label>
         </SpaceBetween>
         <DateInput
           className="testing-date-input"
           name="date"
-          ariaLabel="Enter the date in YYYY/MM/DD"
-          placeholder="YYYY/MM/DD"
+          ariaLabel={`Enter the date in ${inputFormatPlaceholderText}`}
+          placeholder={inputFormatPlaceholderText}
           onChange={e => setValue(e.detail.value)}
           value={value}
+          readOnly={readonly}
+          disabled={disabled}
+          format={format === '' ? undefined : format}
+          inputFormat={inputFormat === '' ? undefined : inputFormat}
+          granularity={monthOnly ? 'month' : 'day'}
+          locale={locale}
         />
         <b>Raw value</b>
         <pre>{JSON.stringify(value, undefined, 2)}</pre>

pages/date-input/permutations.page.tsx → pages/date-input/value-permutations.page.tsx

@@ -11,12 +11,10 @@ import ScreenshotArea from '../utils/screenshot-area';
 
 const permutations = createPermutations<DateInputProps>([
   {
-    value: ['', '2020-01-01'],
-    placeholder: ['', 'YYYY/MM/DD'],
-    ariaLabel: ['Some label'],
-    invalid: [false, true],
-    readOnly: [false, true],
-    disabled: [false, true],
+    value: ['2020', '2020-01', '2020-01-01'],
+    format: ['slashed', 'iso', 'long-localized'],
+    inputFormat: ['slashed', 'iso'],
+    granularity: ['day', 'month'],
   },
 ]);
 
@@ -33,6 +31,7 @@ export default function DateInputPermutations() {
                 /*empty handler to suppress react controlled property warning*/
               }}
               {...permutation}
+              locale="en-US"
             />
           )}
         />

pages/date-picker/common.ts

@@ -0,0 +1,6 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+export const generatePlaceholder = (monthOnly: boolean, isIso: boolean) => {
+  const separator = isIso ? '-' : '/';
+  return `YYYY${separator}${monthOnly ? 'MM' : 'MM' + separator + 'DD'}`;
+};

pages/date-picker/format-permutations.page.tsx

@@ -0,0 +1,45 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import MockDate from 'mockdate';
+
+import { Box, DatePicker, DatePickerProps, SpaceBetween } from '~components';
+
+import createPermutations from '../utils/permutations';
+import PermutationsView from '../utils/permutations-view';
+import ScreenshotArea from '../utils/screenshot-area';
+
+// Mock the date in order to have the current day styling in place for screenshot testing.
+MockDate.set(new Date(2020, 9, 8));
+
+const openCalendarAriaLabel = (selectedDate: string | null) =>
+  'Choose Date' + (selectedDate ? `, selected date is ${selectedDate}` : '');
+
+const permutations = createPermutations<DatePickerProps>([
+  {
+    value: ['2020-03-01'],
+    todayAriaLabel: ['Today'],
+    nextMonthAriaLabel: ['Next Month'],
+    previousMonthAriaLabel: ['Previous Month'],
+    name: ['date-picker-name'],
+    locale: ['en-US', 'de'],
+    ariaLabel: ['date-picker-label'],
+    granularity: ['day', 'month'],
+    openCalendarAriaLabel: [openCalendarAriaLabel],
+    format: ['iso', 'long-localized', 'slashed'],
+    inputFormat: ['iso', 'slashed'],
+  },
+]);
+
+export default function DatePickerScenario() {
+  return (
+    <Box padding="s">
+      <h1>Date picker permutations</h1>
+      <ScreenshotArea>
+        <SpaceBetween size="m">
+          <PermutationsView permutations={permutations} render={permutation => <DatePicker {...permutation} />} />
+        </SpaceBetween>
+      </ScreenshotArea>
+    </Box>
+  );
+}

pages/date-picker/permutations.page.tsx

@@ -30,6 +30,8 @@ const permutations = createPermutations<DatePickerProps>([
     name: ['date-picker-name'],
     ariaLabel: ['date-picker-label'],
     openCalendarAriaLabel: [openCalendarAriaLabel],
+    format: ['iso', 'long-localized', 'slashed'],
+    inputFormat: ['iso', 'slashed'],
   },
 ]);