Inability to override locale on Date formatting results in incorrect localization

max-petrenko commented 3 months ago

Description

First of all, thanks for creating this tool, it has helped me a lot across several projects.

While I'm not entirely sure whether the issue in question is a bug or a missing feature, it prevents me from achieving a desired result, so I'll post it here.

I am creating a website in Ukrainian, it uses ua as a locale name. While everything works fine, date manipulations either via the embedded ICU syntax or by using formatter.dateTime are giving me strings in English, which seems to be the fallback in JS. Upon investigation, I've realised the Intl.DateTimeFormat (which, I presume, to be used by both embeds and formatter) is using BCP47 country/locale codes, which in case of Ukraine is uk, not ua. Therefore, Intl can't recognise it and falls back to the English version.

As there is no way to directly pass locale to either of these date formatting methods, the only way to resolve the issue is to wrap the component that relies on date formatting into a NextIntlClientProvider with the locale prop set to uk. Then, both the formatter and the embedded ICU dates are rendering as expected. Therefore, to make the whole setup work without these manipulations I need to either change 'ua' for 'uk' across all the app, or have a way to override the locale setting for date formatting utils on app-wide or per-use level.

A possible quick fix might be the ability to override params used at createFormatter invocation by allowing to supply them to the useFormatter hook here: https://github.com/amannn/next-intl/blob/44a87a4ff07e779df8ac929c0edcf22fb398f576/packages/use-intl/src/react/useFormatter.tsx#L5

Another option would be to allow for locale override in the formats.dateTime section of the getRequestConfig function call.

Hope I've laid out my problem and the possible ways to fix it clearly.

Verifications

[X] I've verified that the problem I'm experiencing isn't covered in the docs.
[X] I've searched for similar, existing issues on GitHub and Stack Overflow.
[x] I've compared my app to a working example to look for differences.

Mandatory reproduction URL

https://github.com/max-petrenko/next-intl-date-formatting-bug

Reproduction description

Steps to reproduce:

Open reproduction's home page
See the two rendered dates
Notice that one of them displays text in English, and the other one in Ukrainian, though both of them are expected to be in Ukrainian

Expected behaviour

The dates are rendered in Ukrainian (either by default or by using a simple way to configure the locale parameter for date formatting utils)

amannn commented 3 months ago

Hey @max-petrenko and thanks for the kind words!

I think this is what you're looking for: Custom prefixes.

Let me know if that helps!

max-petrenko commented 3 months ago

So, do I understand it correctly that the way to go is to change all references to ua for uk, and alias the uk route prefix to be displayed as ua (or whatever else I come up with)? If so, it's a way do go indeed in my case (took me about 10 minutes to rewire the whole app - a really slick DX indeed), but you may want to consider adding formatting options override anyway - just in case it doesn't work for somebody else.

amannn / next-intl