Times and dates not formatted correctly for language

[kraftvaerk-chth]

Which Umbraco version are you using? (Please write the exact version, example: 10.1.0)

14.3.1

Bug summary

When setting the UI language in user settings to danish, dates and times are formatted incorrectly in date picker fields
MM/DD/YYYY instead of DD/MM/YYYY as well as AM/PM instead of 24-hour format

Also happens despite setting order of preferred locale in the browser (see system information screenshot in specifics)

Instead, the date+time formats seem to be dictated by the browser UI language

Specifics

https://localhost:44310/umbraco/section/user-management/view/users/user/edit/XXXXXX

https://localhost:44310/umbraco/section/content/workspace/document/edit/XXXXXX

When opening System Information (top left, click on the Umbraco Icon and open System Settings):

Swapping the browser UI language (green text indicator - NOT the order of the languages) is the only thing that makes the format display correctly)

Seems to happen due to using Date.toLocaleString() in js
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString

Steps to reproduce

Create a content type with a date+time picker
Set your chosen language to danish
Open a document of the content type you created

Expected result / actual result

Expected result:
Your chosen language in the user settings, will ensure the dates and times are formatted according to the chosen language

Actual result:
Dates and times are formatted by the chosen browser UI language - Chosen language in user settings is ignored

---

This item has been added to our backlog AB#48693

[github-actions]

Hi there @kraftvaerk-chth!

Firstly, a big thank you for raising this issue. Every piece of feedback we receive helps us to make Umbraco better.

We really appreciate your patience while we wait for our team to have a look at this but we wanted to let you know that we see this and share with you the plan for what comes next.

• We'll assess whether this issue relates to something that has already been fixed in a later version of the release that it has been raised for.
• If it's a bug, is it related to a release that we are actively supporting or is it related to a release that's in the end-of-life or security-only phase?
• We'll replicate the issue to ensure that the problem is as described.
• We'll decide whether the behavior is an issue or if the behavior is intended.

We wish we could work with everyone directly and assess your issue immediately but we're in the fortunate position of having lots of contributions to work with and only a few humans who are able to do it. We are making progress though and in the meantime, we will keep you in the loop and let you know when we have any questions.

Thanks, from your friendly Umbraco GitHub bot 🤖 🙂

[NguyenThuyLan]

Hi @kraftvaerk-chth , thank you for reporting issue
It won't work when you change your UI culture for the user.
The format of Datepicker editor will be changed based on your browser/operating system locale.
It will store the value in an ISO format so that you can render it however you like on your front-end.

[nikolaj-kaplan]

We realize that this doesn't work. That is why we created the bug. :-)
But is it by design? It seems strange that the user is able to configure their UI Culture in Umbraco User settings, and that this culture is not used in date pickers. The chosen culture is used in other places in the backoffice. Fx here:

So I would expect the to also be the case for a backoffice date-time-picker.

[nielslyngsoe]

Hi @nikolaj-kaplan makes great sense to use the user setting, we will look into this very soon

[nielslyngsoe]

Hi @kraftvaerk-chth We have now investigated this.

As with many things of the Bellissima project we are using as many native browser features as we find fit.
The same goes for the Date Picker — but sadly this one follows the configuration of the Browser and is not configurable in the implementation. Making it not possible to correct this using native inputs but only possible if we bring our own Date Picker Component.
This is thought not our priority at this moment, so this will not be resolved in near future.

If adjusting browser settings is not viable for you, then please notice that as of v.14+ it is easy to bring your own Property Editor UI for one of the built-in Property Editors (Schema). And thereby you can bring a Date Picker using a Component of your choice.

Sorry for the inconvenience