[Bug]: Chosen date in the V9 DatePicker does not respect user's language settings. It always shows in English.

[dylandong12]

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.

[Hotell]

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

[layershifter]

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.

[Hotell]

v0 DatePicker

@layershifter this is about v8 version previous behaviour .