feat: Date formats for date range picker

pages/date-range-picker/absolute-format-day-picker.permutations.page.tsx

@@ -12,14 +12,14 @@ import { isValid, placeholders } from './common';
 
 const permutations = createPermutations<DateRangePickerProps>([
   {
-    absoluteFormat: ['iso', 'long-localized'],
+    absoluteFormat: ['iso', 'slashed', 'long-localized'],
     dateOnly: [true, false],
     value: [{ type: 'absolute', startDate: '2024-12-30', endDate: '2024-12-31' }],
     isValidRange: [() => ({ valid: true })],
     relativeOptions: [[]],
   },
   {
-    absoluteFormat: ['iso', 'long-localized'],
+    absoluteFormat: ['iso', 'slashed', 'long-localized'],
     dateOnly: [true, false],
     hideTimeOffset: [true, false],
     value: [{ type: 'absolute', startDate: '2024-12-30T00:00:00+01:00', endDate: '2024-12-31T23:59:59+01:00' }],

pages/date-range-picker/absolute-format-month-picker.permutations.page.tsx

@@ -12,7 +12,7 @@ import { isValid, placeholders } from './common';
 
 const permutations = createPermutations<DateRangePickerProps>([
   {
-    absoluteFormat: ['iso', 'long-localized'],
+    absoluteFormat: ['iso', 'slashed', 'long-localized'],
     value: [
       {
         type: 'absolute',
@@ -24,7 +24,7 @@ const permutations = createPermutations<DateRangePickerProps>([
     relativeOptions: [[]],
   },
   {
-    absoluteFormat: ['iso', 'long-localized'],
+    absoluteFormat: ['iso', 'slashed', 'long-localized'],
     hideTimeOffset: [true, false],
     value: [
       {

pages/date-range-picker/common.tsx

@@ -19,6 +19,7 @@ interface DateRangePickerPageSettings {
   warning?: boolean;
   rangeSelectorMode?: DateRangePickerProps.RangeSelectorMode;
   absoluteFormat?: DateRangePickerProps.AbsoluteFormat;
+  dateInputFormat?: DateRangePickerProps['dateInputFormat'];
   timeInputFormat?: DateRangePickerProps['timeInputFormat'];
   timeOffset?: number;
   hideTimeOffset?: boolean;
@@ -36,6 +37,7 @@ const defaultSettings: Required<DateRangePickerPageSettings> = {
   warning: false,
   rangeSelectorMode: 'default',
   absoluteFormat: 'iso',
+  dateInputFormat: 'iso',
   timeInputFormat: 'hh:mm:ss',
   timeOffset: 0,
   hideTimeOffset: false,
@@ -80,6 +82,7 @@ export function useDateRangePickerSettings(
   const rangeSelectorMode = urlParams.rangeSelectorMode ?? def('rangeSelectorMode');
   const absoluteFormat = urlParams.absoluteFormat ?? def('absoluteFormat');
   const timeInputFormat = urlParams.timeInputFormat ?? def('timeInputFormat');
+  const dateInputFormat = urlParams.dateInputFormat ?? def('dateInputFormat');
   const timeOffset = parseNumber(def('timeOffset'), urlParams.timeOffset);
   const hideTimeOffset = parseBoolean(def('hideTimeOffset'), urlParams.hideTimeOffset);
   const expandToViewport = parseBoolean(def('expandToViewport'), urlParams.expandToViewport);
@@ -94,6 +97,7 @@ export function useDateRangePickerSettings(
     warning,
     rangeSelectorMode,
     absoluteFormat,
+    dateInputFormat,
     timeInputFormat,
     timeOffset,
     hideTimeOffset,
@@ -197,6 +201,7 @@ export function useDateRangePickerSettings(
     warning,
     rangeSelectorMode,
     absoluteFormat,
+    dateInputFormat,
     timeInputFormat,
     timeOffset,
     hideTimeOffset,
@@ -242,6 +247,8 @@ export function Settings({
     warning,
     rangeSelectorMode,
     absoluteFormat,
+    dateInputFormat,
+    timeInputFormat,
     timeOffset,
     hideTimeOffset,
     expandToViewport,
@@ -263,7 +270,9 @@ export function Settings({
     { value: 'end-of-page' },
     { value: 'overlapping-pages' },
   ];
-  const absoluteFormatOptions = [{ value: 'iso' }, { value: 'long-localized' }];
+  const dateFormatOptions = [{ value: 'iso' }, { value: 'slashed' }, { value: 'long-localized' }];
+  const inputDateFormat = [{ value: 'iso' }, { value: 'slashed' }];
+  const timeFormatOptions = [{ value: 'hh:mm:ss' }, { value: 'hh:mm' }, { value: 'hh' }];
   return (
     <SpaceBetween size="m" direction="horizontal">
       <FormField label="Range selector mode">
@@ -286,14 +295,34 @@ export function Settings({
 
       <FormField label="Absolute format">
         <Select
-          options={absoluteFormatOptions}
-          selectedOption={absoluteFormatOptions.find(o => o.value === absoluteFormat) ?? null}
+          options={dateFormatOptions}
+          selectedOption={dateFormatOptions.find(o => o.value === absoluteFormat) ?? null}
           onChange={({ detail }) =>
             setSettings({ absoluteFormat: detail.selectedOption.value as DateRangePickerProps.AbsoluteFormat })
           }
         />
       </FormField>
 
+      <FormField label="Date input format">
+        <Select
+          options={inputDateFormat}
+          selectedOption={inputDateFormat.find(o => o.value === dateInputFormat) ?? null}
+          onChange={({ detail }) =>
+            setSettings({ dateInputFormat: detail.selectedOption.value as DateRangePickerProps.DateInputFormat })
+          }
+        />
+      </FormField>
+
+      <FormField label="Time input format">
+        <Select
+          options={timeFormatOptions}
+          selectedOption={timeFormatOptions.find(o => o.value === timeInputFormat) ?? null}
+          onChange={({ detail }) =>
+            setSettings({ timeInputFormat: detail.selectedOption.value as DateRangePickerProps.TimeInputFormat })
+          }
+        />
+      </FormField>
+
       <FormField label="Time offset">
         <Input
           type="number"

pages/date-range-picker/month-calendar-permutations.page.tsx

@@ -33,28 +33,52 @@ const permutations = createPermutations<DateRangePickerCalendarProps>([
     locale: ['en-GB'],
     startOfWeek: [1],
     onChange: [() => {}],
-    timeInputFormat: ['hh:mm:ss'] as const,
     customAbsoluteRangeControl: [undefined],
+    timeInputFormat: ['hh:mm:ss'] as const,
+    absoluteFormat: ['long-localized'] as const,
   })),
   // Disabled dates
   {
     value: [{ start: { date: '2021-08-30', time: '' }, end: { date: '2021-09-03', time: '' } }],
     setValue: [() => {}],
     isDateEnabled: [() => false, (date: Date) => date.getDate() % 2 !== 0],
     customAbsoluteRangeControl: [undefined],
+    timeInputFormat: ['hh:mm:ss'] as const,
+    absoluteFormat: ['long-localized'] as const,
   },
   // Date-only
   {
     value: [{ start: { date: '', time: '' }, end: { date: '', time: '' } }],
     setValue: [() => {}],
     dateOnly: [true],
     customAbsoluteRangeControl: [undefined],
+    timeInputFormat: ['hh:mm:ss'] as const,
+    absoluteFormat: ['long-localized'] as const,
   },
   // Custom control
   {
     value: [{ start: { date: '', time: '' }, end: { date: '', time: '' } }],
     setValue: [() => {}],
     customAbsoluteRangeControl: [() => 'Custom control'],
+    timeInputFormat: ['hh:mm:ss'] as const,
+    absoluteFormat: ['long-localized'] as const,
+  },
+  // Date input formats
+  {
+    value: [{ start: { date: '', time: '' }, end: { date: '', time: '' } }],
+    setValue: [() => {}],
+    customAbsoluteRangeControl: [undefined],
+    timeInputFormat: ['hh:mm:ss'] as const,
+    dateInputFormat: ['iso', 'slashed'] as const,
+    absoluteFormat: ['long-localized'] as const,
+  },
+  // Time input formats
+  {
+    value: [{ start: { date: '', time: '' }, end: { date: '', time: '' } }],
+    setValue: [() => {}],
+    customAbsoluteRangeControl: [undefined],
+    timeInputFormat: ['hh:mm', 'hh'] as const,
+    absoluteFormat: ['long-localized'] as const,
   },
 ]);
 

pages/date-range-picker/range-calendar.page.tsx

@@ -23,7 +23,14 @@ export default function RangeCalendarScenario() {
       <SpaceBetween direction="vertical" size="m">
         <Link id="focusable-before">Focusable element before</Link>
 
-        <RangeCalendar {...props} value={value} setValue={setValue} customAbsoluteRangeControl={undefined} />
+        <RangeCalendar
+          {...props}
+          value={value}
+          setValue={setValue}
+          customAbsoluteRangeControl={undefined}
+          timeInputFormat="hh:mm:ss"
+          absoluteFormat="slashed"
+        />
 
         <Link id="focusable-after">Focusable element after</Link>
       </SpaceBetween>

pages/date-range-picker/with-value.page.tsx

@@ -33,7 +33,8 @@ export default function DatePickerScenario() {
 
         <br />
         <br />
-        <div style={{ blockSize: 500 }}>
+        {/* We give more space at the bottom so that the dropdown opens down and stays within the screenshot area. */}
+        <div style={{ blockSize: 800 }}>
           <b>
             Raw value: <Box variant="pre">{JSON.stringify(props.value, undefined, 2)}</Box>
           </b>

pages/date-range-picker/year-calendar-permutations.page.tsx

@@ -31,19 +31,34 @@ const permutations = createPermutations<DateRangePickerCalendarProps>([
     locale: ['en-GB'],
     onChange: [() => {}],
     customAbsoluteRangeControl: [undefined],
+    timeInputFormat: ['hh:mm:ss'] as const,
+    absoluteFormat: ['long-localized'] as const,
   })),
   // Disabled dates
   {
     value: [{ start: { date: '2022-04', time: '' }, end: { date: '2022-06', time: '' } }],
     setValue: [() => {}],
     isDateEnabled: [() => false],
     customAbsoluteRangeControl: [undefined],
+    timeInputFormat: ['hh:mm:ss'] as const,
+    absoluteFormat: ['long-localized'] as const,
   },
   // Custom control
   {
     value: [{ start: { date: '', time: '' }, end: { date: '', time: '' } }],
     setValue: [() => {}],
     customAbsoluteRangeControl: [() => 'Custom control'],
+    timeInputFormat: ['hh:mm:ss'] as const,
+    absoluteFormat: ['long-localized'] as const,
+  },
+  // Input date formats
+  {
+    value: [{ start: { date: '', time: '' }, end: { date: '', time: '' } }],
+    setValue: [() => {}],
+    customAbsoluteRangeControl: [undefined],
+    timeInputFormat: ['hh:mm:ss'] as const,
+    dateInputFormat: ['iso', 'slashed'] as const,
+    absoluteFormat: ['long-localized'] as const,
   },
 ]);
 

src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap

@@ -10246,13 +10246,13 @@ The event \`detail\` contains the current value of the field.",
 It can take the following values:
 * \`iso\`: ISO 8601 format, e.g.: 2024-01-30T13:32:32+01:00 (or 2024-01-30 when \`dateOnly\` is true)
 * \`long-localized\`: a more human-readable, localized format, e.g.: January 30, 2024, 13:32:32 (UTC+1) (or January 30, 2024 when \`dateOnly\` is true)
-
-Defaults to \`iso\`.",
+* \`slashed\`: similar to ISO 8601 but with '/' in place of '-'. e.g.: 2024/01/30 (or 2024/01)",
       "inlineType": {
-        "name": "DateRangePickerProps.AbsoluteFormat",
+        "name": "DateFormat",
         "type": "union",
         "values": [
           "iso",
+          "slashed",
           "long-localized",
         ],
       },
@@ -10347,6 +10347,25 @@ If provided, the date becomes focusable.",
       "optional": true,
       "type": "DateRangePickerProps.DateDisabledReasonFunction",
     },
+    {
+      "defaultValue": "'slashed'",
+      "description": "Specifies the date format to use on the date inputs in the absolute dropdown.
+
+The format of the input as it is being interacted with. It can take the following values:
+* \`iso\`: ISO 8601 format without time, e.g.: 2024-01-30 (or 2024-01)
+* \`slashed\`: similar to ISO 8601 but with '/' in place of '-'. e.g.: 2024/01/30 (or 2024/01)",
+      "inlineType": {
+        "name": "EditableDateFormat",
+        "type": "union",
+        "values": [
+          "iso",
+          "slashed",
+        ],
+      },
+      "name": "dateInputFormat",
+      "optional": true,
+      "type": "string",
+    },
     {
       "defaultValue": "false",
       "description": "Hides time inputs and changes the input format to date-only, e.g. 2021-04-06.
@@ -10569,6 +10588,21 @@ Defaults to \`false\`.",
             "optional": true,
             "type": "((unit: DateRangePickerProps.TimeUnit, value: number) => string)",
           },
+          {
+            "name": "isoDateConstraintText",
+            "optional": true,
+            "type": "string",
+          },
+          {
+            "name": "isoDateTimeConstraintText",
+            "optional": true,
+            "type": "string",
+          },
+          {
+            "name": "isoMonthConstraintText",
+            "optional": true,
+            "type": "string",
+          },
           {
             "name": "modeSelectionLabel",
             "optional": true,
@@ -10634,6 +10668,21 @@ Defaults to \`false\`.",
             "optional": true,
             "type": "((startDate: string, endDate: string) => string)",
           },
+          {
+            "name": "slashedDateConstraintText",
+            "optional": true,
+            "type": "string",
+          },
+          {
+            "name": "slashedDateTimeConstraintText",
+            "optional": true,
+            "type": "string",
+          },
+          {
+            "name": "slashedMonthConstraintText",
+            "optional": true,
+            "type": "string",
+          },
           {
             "name": "startDateLabel",
             "optional": true,