Data pickers show random dateformats

[jarlef]

Describe the bug

We are trying to use the DatePicker and DateRangePicker but we struggling to let them consistently

For some users they get the format mm/dd/yyyy instead of dd/mm/yyyy

Wrong format

Correct format

Also the component uses random separator in different browsers on my own machine

Chrome

Brave

We have tried setting the locale to en-GB for the entire react application

<I18nProvider locale="en-GB">
...
</I18nProvider>

Steps to reproduce the bug

1. 2. 3. 4.

Expected behavior

A consistent date format across users and browsers to avoid confusion on what the date since showing the date 02/06/2025 as 06/02/2025 can have big consequences if the the users misunderstands the date

There should also be an ability to set the format manually, at least the separator. E.g dd.mm.yyyy instead of dd/mm/yyyy

Specifications

• Version:
• Browser:
• OS:

Additional context

Add any other context or screenshots about the bug. An example in CodeSandbox is very helpful

[yusijs]

I created a ticket with the react-aria folks a while back and was hoping they would be able to provide a proper fix for it, where they default to the system locale rather than the browser locale. They were hesitant to change it, since that would be a breaking change.

I'll look into simplifying setting the locale so it can be passed with a prop.

Re. the separators, I'm not sure I would commit to a change there, since those are locale-determined, but I'll see if there is anything we can do. Hopefully it would be a good enough fix to ensure the locale was more.. streamlined.🤞

[jarlef]

BTW. Instead of relying the react-arias I18nProvider context, couldn't you just extend the EdsProvider context with an additional optional locale prop which is used by the date components?

[yusijs]

BTW. Instead of relying the react-arias I18nProvider context, couldn't you just extend the EdsProvider context with an additional optional locale prop which is used by the date components?

That could be an option; my thinking was to move the I18nProvider inside the datepickers, but should be possible to have a priority order here (props.locale first, if missing we use EdsProvider, and if not set we fall back to whatever the default from react-aria is).

[yusijs]

@jarlef We agreed to skip EdsProvider as an option, as it will be deprecated sometime in the future.

The way I have implemented it now is to use a priority of direct prop <Datepicker locale="..." />, then the value from I18nProvider (if it differs from the fallback value from react-aria), and lastly default to the system value via Intl.DateFormat().resolvedOptions.locale, which is more correct than the react-aria default