DateTime fields in DynamicForm do not honour regional settings

[t0mgerman]

Category

[ ] Enhancement

[*] Bug

[ ] Question

Version

Please specify what version of the library you are using: [3.5.0]

Expected Behavior

When using the DynamicForm control, Date/Time fields should display date strings in the correct date format for the selected region in SharePoint Regional Settings

Observed Behavior

Sites created in English and set to en-GB in regional settings display dates in en-US format.
This may also apply to other sites that are first created in English, but then later changed in regional settings (to other locales).

Steps to Reproduce

1. Create a new site in SharePoint Admin Centre - selecting English as the language
2. A site is created with the locale ID: 1033 and the language name: en-US
3. Amend the site's regional settings to change the locale to 2057 / en-GB
4. Create a list that has a date field, and create a list item that has a date such as 20/12/2021 (20th December 2021)
5. Amend ControlsTest.tsx#L886 to display the DynamicForm control, point at the list and list item that was created, then view in Workbench
6. Observe that the date is in US format: ie. 12/20/2021

Additional Info

The selected regional setting appears to be stored in pageContext as cultureInfo, whereas the UI locale that the site was created with appears to be returned by pageContext.web.languageName. The latter is what is used in DynamicField.tsx

I believe this is the cause of the issue when using UK regional settings. Differences in locale and region related objects (and API response properties) can be observed when using an en-GB region on an English (en-US) created site:

context.pageContext.legacyPageContext.currentCultureLCID - returns 2057 ✔ (en-GB)

context.pageContext.web.language - returns 1033 ❌ - this appears to marry up to the language property returned when you call _api/web

context.pageContext.web.languageName - returns en-US ❌ (aka LCID 1033) -

context.pageContext.web.cultureInfo.currentCultureName - returns en-GB ✔ - this appears to match what is returned when calling _api/web/regionalSettings

Proposed Solution

Replace the reference to context.pageContext.web.languageName in DynamicField.tsx#L302 and #L312 with context.pageContext.cultureInfo.currentCultureName.

This will ensure the dynamic form correctly represents dates in local format just as out-of-the-box list forms do - for all regions (hopefully!)

[ghost]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[t0mgerman]

For anyone this is affecting, who can't wait for an update - we were able to get dates displaying correctly by modifying the private languageName property of context.pageContext.web - before we passed the context object to the DynamicForm control. ie:

Object.defineProperty(this.props.context.pageContext.web, 'languageName', {value: 'en-GB'});

very hacky, and I'm not sure if the page context is passed by reference and/or if this would affect other things on the page - but it at least works to get the form displaying dates correctly until such time as currentCultureName or another solution can be used.