1

I am doing date format using this function

// DateFormat required from "sap/ui/core/format/DateFormat"
DateFormat.getDateTimeInstance({ pattern: "yyyy-MM-dd HH:mm" });

The format is working fine in "DE" but it is returning wrong value in "EN". In both languages, the time is 24 hour. What I need is:

  • In English, the time text should contain AM or PM.
  • In German, the time text should be in the 24h format.

How can this be achieved?

Target UI5 version: 1.108

Boghyon Hoffmann
18.3k16 gold badges99 silver badges208 bronze badges
asked Nov 16, 2022 at 15:15
2
  • 1
    Does the date have to be formatted strictly in this "yyyy-MM-dd" pattern? Why not format the date locale-dependent as well (E.g. "16.04.2022" in Germany but "Nov 16, 2022" in the US)? Commented Nov 16, 2022 at 16:42
  • 1
    Why should "English" show as am/pm? 24hr is much more acceptable these days, in the UK at least. Commented Apr 28, 2023 at 8:58

1 Answer 1

1

According to the Unicode's Date Field Symbol table:

  • HH corresponds to the "24-hour-cycle format"
  • hh corresponds to the "12-hour-cycle format"
  • jj "is the only way to [...] request a locale's preferred time cycle type (12-hour or 24-hour)."

If not required otherwise, I'd strongly discourage from hardcoding the pattern in the format options in order to let the framework format the date and time depending on the user locale. You can use the format option instead to specify which symbol to incorporate (e.g. jj instead of hh or HH) when formatting the date time value.

Run this snippet to see the result:

globalThis.onUI5Init = () => sap.ui.require([
 "sap/ui/core/format/DateFormat",
 "sap/ui/core/Locale",
 "sap/ui/core/Configuration",
 "sap/m/VBox",
 "sap/m/ObjectStatus",
], (DateFormat, Locale, Configuration, VBox, ObjectStatus) => {
 "use strict";
 const currentUserLocale = Configuration.getLanguageTag();
 const control = new VBox({
 items: [
 new ObjectStatus({
 title: "Locale \"de-DE\"",
 text: DateFormat.getDateTimeInstance({
 format: "yMdjjmm",
 UTC: true,
 }, new Locale("de-DE"))
 .format(new Date(new Date().setUTCHours(23, 0)))
 }),
 new ObjectStatus({
 title: "Locale \"en-US\"",
 text: DateFormat.getDateTimeInstance({
 format: "yMdjjmm",
 UTC: true,
 }, new Locale("en-US"))
 .format(new Date(new Date().setUTCHours(23, 0)))
 }),
 new ObjectStatus({
 title: `Your Preferred Locale ("${currentUserLocale}")`, // Detected locale as per https://sdk.openui5.org/topic/91f21f176f4d1014b6dd926db0e91070
 text: DateFormat.getDateTimeInstance({
 format: "yMdjjmm",
 UTC: true,
 }).format(new Date(new Date().setUTCHours(23, 0)))
 })
 ],
 renderType: "Bare",
 });
 control.addStyleClass("sapUiTinyMargin").placeAt("content");
});
<script id="sap-ui-bootstrap"
 src="https://sdk.openui5.org/nightly/resources/sap-ui-core.js"
 data-sap-ui-libs="sap.ui.core,sap.m,sap.ui.layout,sap.ui.unified"
 data-sap-ui-async="true"
 data-sap-ui-oninit="onUI5Init"
 data-sap-ui-compatversion="edge"
 data-sap-ui-excludejquerycompat="true"
 data-sap-ui-xx-waitfortheme="init"
></script>
<body id="content" class="sapUiBody sapUiSizeCompact"></body>

Given today at 23:00:00Z:

Locale "de-DE": 28.4.2023, 23:00
Locale "en-US": 4/28/2023, 11:00 PM

API reference: sap/ui/core/format/DateFormat.getDateTimeInstance

Same can be achieved in property binding within XML declaratively via type and formatOptions.

<SomeControl xmlns="..."
 xmlns:core="sap.ui.core"
 core:require="{ DateTimeOffset: 'sap/ui/model/odata/type/DateTimeOffset' }"
 someControlProperty="{
 path: 'myODataModel>...',
 type: 'DateTimeOffset',
 formatOptions: {
 format: 'yMdjjmm'
 },
 ...
 }"
/>

API reference: sap/ui/model/odata/type/DateTimeOffset
Documentation (must-read): Dates, Times, Timestamps, and Time Zones
Documentation: Formatting, Parsing, and Validating Data — Data Binding (in XML)

answered Nov 16, 2022 at 16:33
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

Draft saved
Draft discarded

Sign up or log in

Sign up using Google
Sign up using Email and Password

Post as a guest

Required, but never shown

Post as a guest

Required, but never shown

By clicking "Post Your Answer", you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.