Feature: Hide timezone from date range picker

[jhubble]

Description

In the date range picker, the selected date range shown always includes the time zone with both dates. This causes it to take up excess space. I would like to be able to configure it to not show the time zone. As a bonus, it would be nice to be able to specify an arbitrary format for the times.

Code of Conduct

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

[johannes-weber]

Thanks for your request! We're looking into it and use this feature request to collect interest and use-cases.

[IgniparousTempest]

The ISO format might be confusing to non-technical users. For example, in the very specific use case of a website for non-technical users with a strictly South African audience, 2023-11-01T00:00:00+02:00 — 2023-11-18T23:59:59+02:00 might be easier to read as 1st Novermber 2023 at 00:00 to 18th Novermber 2023 at 23:59.

It would be useful to have an i18nStrings key similar to the existing renderSelectedAbsoluteRangeAriaLive:

renderSelectedAbsoluteRange?: (
    startDate: string,
    endDate: string
  ) => string

used like so,

<DateRangePicker
    i18nStrings={{
        renderSelectedAbsoluteRange: (startDate, endDate) => `something`
    }}
/>

That way, users could define their own format. I realise the recommendation would be to use ISO, but sometimes the developer should have the power to override that best practice.

[connorlanigan]

We recently released two new properties on the Date Range Picker component that support this: hideTimeOffset={true} and absoluteFormat="long-localized". You can find a usage example on our website.