Skip to main content
Stack Overflow
  1. About
  3. For Teams

Return to Answer

Post Timeline

Enhance answer with setting the format option declaratively in XML and references to related documentation topics; Improve formatting; Apply latest default and preferred theme in the runnable code snippet;
Source Link
Boghyon Hoffmann
  • 18.3k
  • 16
  • 99
  • 208

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.

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 localePreferred 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-theme="sap_horizon_dark"
 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"><class="sapUiBody sapUiSizeCompact"></body>

The sameAPI reference: sap/ui/core/format/DateFormat.getDateTimeInstance

Same can be achieved in property binding definitions 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/core/format/DateFormat.getDateTimeInstance 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)

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/HH) when formatting the date time value.

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 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/resources/sap-ui-core.js"
 data-sap-ui-libs="sap.ui.core,sap.m,sap.ui.layout,sap.ui.unified"
 data-sap-ui-theme="sap_horizon_dark"
 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"></body>

The same can be achieved in property binding definitions within XML declaratively via type and formatOptions.

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

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.

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>

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)

Improved answer by sharing the `jj` option.
Source Link
Boghyon Hoffmann
  • 18.3k
  • 16
  • 99
  • 208

According to the http://unicode.org/reports/tr35/tr35-dates.html#table-date-field-symbol-table 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 HHpattern matches "the 24-hour-cycle format" whereasin 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 matches "the 12-hour-cycle format." If/HH) when formatting the date time value should be formatted dynamically depending on the user locale, hardcoding the pattern won't work.

Instead, let the UI5 framework format the date time for you. 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({ style: "medium/short" },/*force:*/new Locale("de-DE")) // Otherwise format: "yMdjjmm", UI5 automatically detects the locale for you according to httpsUTC://sdk.openui5.org/topic/91f21f176f4d1014b6dd926db0e91070 true,
 }, new Locale("de-DE"))
  .format(new Date(new Date().setUTCHours(23, 0)))
 }),
 new ObjectStatus({
 title: "Locale \"en-US\"",
 text: DateFormat.getDateTimeInstance({ style: "medium/short" },/*force:*/new Locale("en-US")) // Otherwise format: "yMdjjmm", UI5 automatically detects the locale for you according to httpsUTC://sdk.openui5.org/topic/91f21f176f4d1014b6dd926db0e91070 true,
 }, new Locale("en-US"))
 .format(new Date(new Date().setUTCHours(23, 0)))
 }),
 new ObjectStatus({
 title: `Your locale ("${currentUserLocale}")`, // Detected locale as per https://sdk.openui5.org/topic/91f21f176f4d1014b6dd926db0e91070
 text: DateFormat.getDateTimeInstance({ style: "medium/short" }) 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/resources/sap-ui-core.js"
 data-sap-ui-libs="sap.ui.core,sap.m,sap.ui.layout,sap.ui.unified"
 data-sap-ui-theme="sap_horizon_dark"
 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"></body>

Given today at 23:00:00Z:

Locale "de-DE": 1628.114.20222023, 1723:2600
Locale "en-US": Nov 16, 20224/28/2023, 511:2600 PM

The same can be achieved in property binding definitions within XML declaratively via type and formatOptions.

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

According to http://unicode.org/reports/tr35/tr35-dates.html#table-date-field-symbol-table, HH matches "the 24-hour-cycle format" whereas hh matches "the 12-hour-cycle format." If the date time value should be formatted dynamically depending on the user locale, hardcoding the pattern won't work.

Instead, let the UI5 framework format the date time for you. 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({ style: "medium/short" },/*force:*/new Locale("de-DE")) // Otherwise, UI5 automatically detects the locale for you according to https://sdk.openui5.org/topic/91f21f176f4d1014b6dd926db0e91070
 .format(new Date())
 }),
 new ObjectStatus({
 title: "Locale \"en-US\"",
 text: DateFormat.getDateTimeInstance({ style: "medium/short" },/*force:*/new Locale("en-US")) // Otherwise, UI5 automatically detects the locale for you according to https://sdk.openui5.org/topic/91f21f176f4d1014b6dd926db0e91070
 .format(new Date())
 }),
 new ObjectStatus({
 title: `Your locale ("${currentUserLocale}")`,
 text: DateFormat.getDateTimeInstance({ style: "medium/short" })
 .format(new Date())
 })
 ],
 renderType: "Bare",
 });
 control.addStyleClass("sapUiTinyMargin").placeAt("content");
});
<script id="sap-ui-bootstrap"
 src="https://sdk.openui5.org/resources/sap-ui-core.js"
 data-sap-ui-libs="sap.ui.core,sap.m,sap.ui.layout,sap.ui.unified"
 data-sap-ui-theme="sap_horizon_dark"
 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"></body>

Locale "de-DE": 16.11.2022, 17:26
Locale "en-US": Nov 16, 2022, 5:26 PM

The same can be achieved in property binding definitions within XML declaratively via type and formatOptions.

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/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 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/resources/sap-ui-core.js"
 data-sap-ui-libs="sap.ui.core,sap.m,sap.ui.layout,sap.ui.unified"
 data-sap-ui-theme="sap_horizon_dark"
 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"></body>

Given today at 23:00:00Z:

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

The same can be achieved in property binding definitions within XML declaratively via type and formatOptions.

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

Added "Your locale"
Source Link
Boghyon Hoffmann
  • 18.3k
  • 16
  • 99
  • 208
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({ style: "medium/short" },/*force:*/new Locale("de-DE")) // Otherwise, UI5 automatically detects the locale for you according to https://sdk.openui5.org/topic/91f21f176f4d1014b6dd926db0e91070
 .format(new Date())
 }),
 new ObjectStatus({
 title: "Locale \"en-US\"",
 text: DateFormat.getDateTimeInstance({ style: "medium/short" },/*force:*/new Locale("en-US")) // Otherwise, UI5 automatically detects the locale for you according to https://sdk.openui5.org/topic/91f21f176f4d1014b6dd926db0e91070
 .format(new Date())
 }),
  new ObjectStatus({
 title: `Your locale ("${currentUserLocale}")`,
 text: DateFormat.getDateTimeInstance({ style: "medium/short" })
 .format(new Date())
 })
 ],
 renderType: "Bare",
 });
 control.addStyleClass("sapUiTinyMargin").placeAt("content");
});
<script id="sap-ui-bootstrap"
 src="https://sdk.openui5.org/resources/sap-ui-core.js"
 data-sap-ui-libs="sap.ui.core,sap.m,sap.ui.layout,sap.ui.unified"
 data-sap-ui-theme="sap_horizon_dark"
 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"></body>
globalThis.onUI5Init = () => sap.ui.require([
 "sap/ui/core/format/DateFormat",
 "sap/ui/core/Locale",
 "sap/m/VBox",
 "sap/m/ObjectStatus",
], (DateFormat, Locale, VBox, ObjectStatus) => {
 "use strict";
 new VBox({
 items: [
 new ObjectStatus({
 title: "Locale \"de-DE\"",
 text: DateFormat.getDateTimeInstance({ style: "medium/short" },/*force:*/new Locale("de-DE")) // Otherwise, UI5 automatically detects the locale for you according to https://sdk.openui5.org/topic/91f21f176f4d1014b6dd926db0e91070
 .format(new Date())
 }),
 new ObjectStatus({
 title: "Locale \"en-US\"",
 text: DateFormat.getDateTimeInstance({ style: "medium/short" },/*force:*/new Locale("en-US")) // Otherwise, UI5 automatically detects the locale for you according to https://sdk.openui5.org/topic/91f21f176f4d1014b6dd926db0e91070
 .format(new Date())
 }),
 ],
 renderType: "Bare",
 }).addStyleClass("sapUiTinyMargin").placeAt("content");
});
<script id="sap-ui-bootstrap"
 src="https://sdk.openui5.org/resources/sap-ui-core.js"
 data-sap-ui-libs="sap.ui.core,sap.m,sap.ui.layout,sap.ui.unified"
 data-sap-ui-theme="sap_horizon_dark"
 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"></body>
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({ style: "medium/short" },/*force:*/new Locale("de-DE")) // Otherwise, UI5 automatically detects the locale for you according to https://sdk.openui5.org/topic/91f21f176f4d1014b6dd926db0e91070
 .format(new Date())
 }),
 new ObjectStatus({
 title: "Locale \"en-US\"",
 text: DateFormat.getDateTimeInstance({ style: "medium/short" },/*force:*/new Locale("en-US")) // Otherwise, UI5 automatically detects the locale for you according to https://sdk.openui5.org/topic/91f21f176f4d1014b6dd926db0e91070
 .format(new Date())
 }),
  new ObjectStatus({
 title: `Your locale ("${currentUserLocale}")`,
 text: DateFormat.getDateTimeInstance({ style: "medium/short" })
 .format(new Date())
 })
 ],
 renderType: "Bare",
 });
 control.addStyleClass("sapUiTinyMargin").placeAt("content");
});
<script id="sap-ui-bootstrap"
 src="https://sdk.openui5.org/resources/sap-ui-core.js"
 data-sap-ui-libs="sap.ui.core,sap.m,sap.ui.layout,sap.ui.unified"
 data-sap-ui-theme="sap_horizon_dark"
 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"></body>
Source Link
Boghyon Hoffmann
  • 18.3k
  • 16
  • 99
  • 208
Loading
lang-js

AltStyle によって変換されたページ (->オリジナル) /