[Feature Request]: Custom date range format

[EricBorland]

Description

Currently, the date range input displays the dates in iso string + offset (eg: "2023-06-01T00:00:00+02:00 — 2023-07-11T23:59:59+02:00") which is way too verbose and not very user friendly for non-devs.

I suggest to allow to pass a function prop to the DateRangePicker (eg: dateRangeFormat) to override this default formatting to be able to use your own formatter, like Intl that allows also localisation.

In case anyone is struggling with this, I've created a patch, it was the most straight forward, you can return your own format:

/patches/@cloudscape-design+components+3.0.321.patch:

diff --git a/node_modules/@cloudscape-design/components/internal/utils/date-time/format-date-range.js b/node_modules/@cloudscape-design/components/internal/utils/date-time/format-date-range.js
index 24e1a1b..de9b04f 100644
--- a/node_modules/@cloudscape-design/components/internal/utils/date-time/format-date-range.js
+++ b/node_modules/@cloudscape-design/components/internal/utils/date-time/format-date-range.js
@@ -3,9 +3,14 @@
 import { formatTimezoneOffset } from './format-timezone-offset';
 import { isIsoDateOnly } from './is-iso-date-only';
 export function formatDateRange(startDate, endDate, timeOffset) {
-    const isDateOnly = isIsoDateOnly(startDate) && isIsoDateOnly(endDate);
-    const formattedStartOffset = isDateOnly ? '' : formatTimezoneOffset(startDate, timeOffset.startDate);
-    const formattedEndOffset = isDateOnly ? '' : formatTimezoneOffset(endDate, timeOffset.endDate);
-    return startDate + formattedStartOffset + ' ' + '—' + ' ' + endDate + formattedEndOffset;
+    const options = {
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+      hour: "numeric",
+      minute: "numeric",
+    };
+    const dateTimeFormat = new Intl.DateTimeFormat('en', options);
+    return dateTimeFormat.format(new Date(startDate)) + ' - ' + dateTimeFormat.format(new Date(endDate));
 }
 //# sourceMappingURL=format-date-range.js.map

Code of Conduct

• [X] I agree to follow this project's Code of Conduct
• [X] I checked the current issues for duplicate requests

[abdhalees]

Hello Eric,

This feature would be a reasonable addition to the Cloudscape Design System. However, we don’t have a plan for this change in the short-term future. We will post updates on this thread when any plans change.

[connorlanigan]

We have now extended the Date Range Picker with a new property that can be used to address this: absoluteFormat="long-localized". It formats the date range in a human-friendly, localised way. You can see an example on our website.