Skip to content

Commit 75787bc

Browse files
pan-kotpan-kot
committed
feat: Date formats for date range picker
1 parent ade060d commit 75787bc

18 files changed

+643
-119
lines changed

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,14 @@ import { isValid, placeholders } from './common';
1212

1313
const permutations = createPermutations<DateRangePickerProps>([
1414
{
15-
absoluteFormat: ['iso', 'long-localized'],
15+
absoluteFormat: ['iso', 'slashed', 'long-localized'],
1616
dateOnly: [true, false],
1717
value: [{ type: 'absolute', startDate: '2024-12-30', endDate: '2024-12-31' }],
1818
isValidRange: [() => ({ valid: true })],
1919
relativeOptions: [[]],
2020
},
2121
{
22-
absoluteFormat: ['iso', 'long-localized'],
22+
absoluteFormat: ['iso', 'slashed', 'long-localized'],
2323
dateOnly: [true, false],
2424
hideTimeOffset: [true, false],
2525
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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import { isValid, placeholders } from './common';
1212

1313
const permutations = createPermutations<DateRangePickerProps>([
1414
{
15-
absoluteFormat: ['iso', 'long-localized'],
15+
absoluteFormat: ['iso', 'slashed', 'long-localized'],
1616
value: [
1717
{
1818
type: 'absolute',
@@ -24,7 +24,7 @@ const permutations = createPermutations<DateRangePickerProps>([
2424
relativeOptions: [[]],
2525
},
2626
{
27-
absoluteFormat: ['iso', 'long-localized'],
27+
absoluteFormat: ['iso', 'slashed', 'long-localized'],
2828
hideTimeOffset: [true, false],
2929
value: [
3030
{

‎pages/date-range-picker/common.tsx

Lines changed: 30 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ interface DateRangePickerPageSettings {
1919
warning?: boolean;
2020
rangeSelectorMode?: DateRangePickerProps.RangeSelectorMode;
2121
absoluteFormat?: DateRangePickerProps.AbsoluteFormat;
22+
dateInputFormat?: DateRangePickerProps['dateInputFormat'];
2223
timeInputFormat?: DateRangePickerProps['timeInputFormat'];
2324
timeOffset?: number;
2425
hideTimeOffset?: boolean;
@@ -36,6 +37,7 @@ const defaultSettings: Required<DateRangePickerPageSettings> = {
3637
warning: false,
3738
rangeSelectorMode: 'default',
3839
absoluteFormat: 'iso',
40+
dateInputFormat: 'iso',
3941
timeInputFormat: 'hh:mm:ss',
4042
timeOffset: 0,
4143
hideTimeOffset: false,
@@ -80,6 +82,7 @@ export function useDateRangePickerSettings(
8082
const rangeSelectorMode = urlParams.rangeSelectorMode ?? def('rangeSelectorMode');
8183
const absoluteFormat = urlParams.absoluteFormat ?? def('absoluteFormat');
8284
const timeInputFormat = urlParams.timeInputFormat ?? def('timeInputFormat');
85+
const dateInputFormat = urlParams.dateInputFormat ?? def('dateInputFormat');
8386
const timeOffset = parseNumber(def('timeOffset'), urlParams.timeOffset);
8487
const hideTimeOffset = parseBoolean(def('hideTimeOffset'), urlParams.hideTimeOffset);
8588
const expandToViewport = parseBoolean(def('expandToViewport'), urlParams.expandToViewport);
@@ -94,6 +97,7 @@ export function useDateRangePickerSettings(
9497
warning,
9598
rangeSelectorMode,
9699
absoluteFormat,
100+
dateInputFormat,
97101
timeInputFormat,
98102
timeOffset,
99103
hideTimeOffset,
@@ -242,6 +246,8 @@ export function Settings({
242246
warning,
243247
rangeSelectorMode,
244248
absoluteFormat,
249+
dateInputFormat,
250+
timeInputFormat,
245251
timeOffset,
246252
hideTimeOffset,
247253
expandToViewport,
@@ -263,7 +269,8 @@ export function Settings({
263269
{ value: 'end-of-page' },
264270
{ value: 'overlapping-pages' },
265271
];
266-
const absoluteFormatOptions = [{ value: 'iso' }, { value: 'long-localized' }];
272+
const dateFormatOptions = [{ value: 'iso' }, { value: 'slashed' }, { value: 'long-localized' }];
273+
const timeFormatOptions = [{ value: 'hh:mm:ss' }, { value: 'hh:mm' }, { value: 'hh' }];
267274
return (
268275
<SpaceBetween size="m" direction="horizontal">
269276
<FormField label="Range selector mode">
@@ -286,14 +293,34 @@ export function Settings({
286293

287294
<FormField label="Absolute format">
288295
<Select
289-
options={absoluteFormatOptions}
290-
selectedOption={absoluteFormatOptions.find(o => o.value === absoluteFormat) ?? null}
296+
options={dateFormatOptions}
297+
selectedOption={dateFormatOptions.find(o => o.value === absoluteFormat) ?? null}
291298
onChange={({ detail }) =>
292299
setSettings({ absoluteFormat: detail.selectedOption.value as DateRangePickerProps.AbsoluteFormat })
293300
}
294301
/>
295302
</FormField>
296303

304+
<FormField label="Date input format">
305+
<Select
306+
options={dateFormatOptions}
307+
selectedOption={dateFormatOptions.find(o => o.value === dateInputFormat) ?? null}
308+
onChange={({ detail }) =>
309+
setSettings({ dateInputFormat: detail.selectedOption.value as DateRangePickerProps.DateInputFormat })
310+
}
311+
/>
312+
</FormField>
313+
314+
<FormField label="Time input format">
315+
<Select
316+
options={timeFormatOptions}
317+
selectedOption={timeFormatOptions.find(o => o.value === timeInputFormat) ?? null}
318+
onChange={({ detail }) =>
319+
setSettings({ timeInputFormat: detail.selectedOption.value as DateRangePickerProps.TimeInputFormat })
320+
}
321+
/>
322+
</FormField>
323+
297324
<FormField label="Time offset">
298325
<Input
299326
type="number"

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

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,28 +33,52 @@ const permutations = createPermutations<DateRangePickerCalendarProps>([
3333
locale: ['en-GB'],
3434
startOfWeek: [1],
3535
onChange: [() => {}],
36-
timeInputFormat: ['hh:mm:ss'] as const,
3736
customAbsoluteRangeControl: [undefined],
37+
timeInputFormat: ['hh:mm:ss'] as const,
38+
absoluteFormat: ['long-localized'] as const,
3839
})),
3940
// Disabled dates
4041
{
4142
value: [{ start: { date: '2021-08-30', time: '' }, end: { date: '2021-09-03', time: '' } }],
4243
setValue: [() => {}],
4344
isDateEnabled: [() => false, (date: Date) => date.getDate() % 2 !== 0],
4445
customAbsoluteRangeControl: [undefined],
46+
timeInputFormat: ['hh:mm:ss'] as const,
47+
absoluteFormat: ['long-localized'] as const,
4548
},
4649
// Date-only
4750
{
4851
value: [{ start: { date: '', time: '' }, end: { date: '', time: '' } }],
4952
setValue: [() => {}],
5053
dateOnly: [true],
5154
customAbsoluteRangeControl: [undefined],
55+
timeInputFormat: ['hh:mm:ss'] as const,
56+
absoluteFormat: ['long-localized'] as const,
5257
},
5358
// Custom control
5459
{
5560
value: [{ start: { date: '', time: '' }, end: { date: '', time: '' } }],
5661
setValue: [() => {}],
5762
customAbsoluteRangeControl: [() => 'Custom control'],
63+
timeInputFormat: ['hh:mm:ss'] as const,
64+
absoluteFormat: ['long-localized'] as const,
65+
},
66+
// Date input formats
67+
{
68+
value: [{ start: { date: '', time: '' }, end: { date: '', time: '' } }],
69+
setValue: [() => {}],
70+
customAbsoluteRangeControl: [undefined],
71+
timeInputFormat: ['hh:mm:ss'] as const,
72+
dateInputFormat: ['iso', 'slashed'] as const,
73+
absoluteFormat: ['long-localized'] as const,
74+
},
75+
// Time input formats
76+
{
77+
value: [{ start: { date: '', time: '' }, end: { date: '', time: '' } }],
78+
setValue: [() => {}],
79+
customAbsoluteRangeControl: [undefined],
80+
timeInputFormat: ['hh:mm', 'hh'] as const,
81+
absoluteFormat: ['long-localized'] as const,
5882
},
5983
]);
6084

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

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,14 @@ export default function RangeCalendarScenario() {
2323
<SpaceBetween direction="vertical" size="m">
2424
<Link id="focusable-before">Focusable element before</Link>
2525

26-
<RangeCalendar {...props} value={value} setValue={setValue} customAbsoluteRangeControl={undefined} />
26+
<RangeCalendar
27+
{...props}
28+
value={value}
29+
setValue={setValue}
30+
customAbsoluteRangeControl={undefined}
31+
timeInputFormat="hh:mm:ss"
32+
absoluteFormat="slashed"
33+
/>
2734

2835
<Link id="focusable-after">Focusable element after</Link>
2936
</SpaceBetween>

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,19 +31,34 @@ const permutations = createPermutations<DateRangePickerCalendarProps>([
3131
locale: ['en-GB'],
3232
onChange: [() => {}],
3333
customAbsoluteRangeControl: [undefined],
34+
timeInputFormat: ['hh:mm:ss'] as const,
35+
absoluteFormat: ['long-localized'] as const,
3436
})),
3537
// Disabled dates
3638
{
3739
value: [{ start: { date: '2022-04', time: '' }, end: { date: '2022-06', time: '' } }],
3840
setValue: [() => {}],
3941
isDateEnabled: [() => false],
4042
customAbsoluteRangeControl: [undefined],
43+
timeInputFormat: ['hh:mm:ss'] as const,
44+
absoluteFormat: ['long-localized'] as const,
4145
},
4246
// Custom control
4347
{
4448
value: [{ start: { date: '', time: '' }, end: { date: '', time: '' } }],
4549
setValue: [() => {}],
4650
customAbsoluteRangeControl: [() => 'Custom control'],
51+
timeInputFormat: ['hh:mm:ss'] as const,
52+
absoluteFormat: ['long-localized'] as const,
53+
},
54+
// Input date formats
55+
{
56+
value: [{ start: { date: '', time: '' }, end: { date: '', time: '' } }],
57+
setValue: [() => {}],
58+
customAbsoluteRangeControl: [undefined],
59+
timeInputFormat: ['hh:mm:ss'] as const,
60+
dateInputFormat: ['iso', 'slashed'] as const,
61+
absoluteFormat: ['long-localized'] as const,
4762
},
4863
]);
4964

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

Lines changed: 54 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10180,13 +10180,15 @@ The event \`detail\` contains the current value of the field.",
1018010180
It can take the following values:
1018110181
* \`iso\`: ISO 8601 format, e.g.: 2024-01-30T13:32:32+01:00 (or 2024-01-30 when \`dateOnly\` is true)
1018210182
* \`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)
10183+
* \`slashed\`: similar to ISO 8601 but with '/' in place of '-'. e.g.: 2024/01/30 (or 2024/01)
1018310184

1018410185
Defaults to \`iso\`.",
1018510186
"inlineType": {
10186-
"name": "DateRangePickerProps.AbsoluteFormat",
10187+
"name": "DateFormat",
1018710188
"type": "union",
1018810189
"values": [
1018910190
"iso",
10191+
"slashed",
1019010192
"long-localized",
1019110193
],
1019210194
},
@@ -10281,6 +10283,27 @@ If provided, the date becomes focusable.",
1028110283
"optional": true,
1028210284
"type": "DateRangePickerProps.DateDisabledReasonFunction",
1028310285
},
10286+
{
10287+
"description": "Specifies the date format to use on the date inputs in the absolute dropdown.
10288+
10289+
The format of the input as it is being interacted with. It can take the following values:
10290+
* \`iso\`: ISO 8601 format without time, e.g.: 2024-01-30 (or 2024-01)
10291+
* \`slashed\`: similar to ISO 8601 but with '/' in place of '-'. e.g.: 2024/01/30 (or 2024/01)
10292+
10293+
Defaults to the value of \`absoluteFormat\` when not set. If \`absoluteFormat\` is long-localized,
10294+
the \`dateInputFormat\` then defaults to 'iso'.",
10295+
"inlineType": {
10296+
"name": "EditableDateFormat",
10297+
"type": "union",
10298+
"values": [
10299+
"iso",
10300+
"slashed",
10301+
],
10302+
},
10303+
"name": "dateInputFormat",
10304+
"optional": true,
10305+
"type": "string",
10306+
},
1028410307
{
1028510308
"defaultValue": "false",
1028610309
"description": "Hides time inputs and changes the input format to date-only, e.g. 2021-04-06.
@@ -10503,6 +10526,21 @@ Defaults to \`false\`.",
1050310526
"optional": true,
1050410527
"type": "((unit: DateRangePickerProps.TimeUnit, value: number) => string)",
1050510528
},
10529+
{
10530+
"name": "isoDateConstraintText",
10531+
"optional": true,
10532+
"type": "string",
10533+
},
10534+
{
10535+
"name": "isoDateTimeConstraintText",
10536+
"optional": true,
10537+
"type": "string",
10538+
},
10539+
{
10540+
"name": "isoMonthConstraintText",
10541+
"optional": true,
10542+
"type": "string",
10543+
},
1050610544
{
1050710545
"name": "modeSelectionLabel",
1050810546
"optional": true,
@@ -10568,6 +10606,21 @@ Defaults to \`false\`.",
1056810606
"optional": true,
1056910607
"type": "((startDate: string, endDate: string) => string)",
1057010608
},
10609+
{
10610+
"name": "slashedDateConstraintText",
10611+
"optional": true,
10612+
"type": "string",
10613+
},
10614+
{
10615+
"name": "slashedDateTimeConstraintText",
10616+
"optional": true,
10617+
"type": "string",
10618+
},
10619+
{
10620+
"name": "slashedMonthConstraintText",
10621+
"optional": true,
10622+
"type": "string",
10623+
},
1057110624
{
1057210625
"name": "startDateLabel",
1057310626
"optional": true,

0 commit comments

Comments
 (0)