microsoft
[Bug]: Chosen date in the V9 DatePicker does not respect user's language settings. It always shows in English.
Library
React Components / v9 (@fluentui/react-components)
System Info
System:
OS: Windows 10 10.0.22631
CPU: (16) x64 AMD EPYC 7763 64-Core Processor
Memory: 13.19 GB / 63.95 GB
Browsers:
Edge: Chromium (124.0.2478.67)
Internet Explorer: 11.0.22621.1
Are you reporting Accessibility issue?
None
Reproduction
https://stackblitz.com/edit/afm5s9?file=src%2Fexample.tsx
Bug Description
Actual Behavior
Change the language of the Teams client or the browser. Select a date. The chosen date is always in English.
Expected Behavior
The chosen date should respect user's language settings.
I see there is a localized example but it is not what I am looking for. It translates each month and reformats the date manually through the formatDate method. However, this is not what client side can do, we cannot determine the order of the day, month, year because for some language, people read from right to left. We do not need to do anything when we use the old date picker, the chosen date is automatically translated, but after the migration, the chosen date is always in English. This is the last piece of our migration, we are blocked by this until we can find a solution.
Logs
No response
Requested priority
Blocking
Products/sites affected
No response
Are you willing to submit a PR to fix?
no
Validations
- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- [X] The provided reproduction is a minimal reproducible example of the bug.
I don't have proper context but I'm curious how We do not need to do anything when we use the old date picker, the chosen date is automatically translated, but after the migration, the chosen date is always in English is actually working, as that needs to be done within application code based on language setting fetched from user browser.
Briefly looked at the v8 and v9 format/value implementation and it is the same so I'm not sure the behaviour that "just works" is actually what is happening.
This demo shows that there is no auto translation in place for v8 control
I'll leave this to the SME on this control @sopranopillow
ty
We had conversation about this in offline.
For context, v0 DatePicker used strings prop to also localize the input, v9 one requires to use onFormatDate as documented in the examples. Both datepickers don't have built-in localization by design. Closing it.
