sapui5 - Date Mismatch in UI5 Application

Question

Welcome To Ask or Share your Answers For Others

sapui5 - Date Mismatch in UI5 Application

1 Answer

深蓝 · Answer 1 · 2021-10-23T18:42:28+0000

UI5 already takes care of handling dates properly if you use the binding type sap.ui.model.odata.type.DateTime in the value binding definition of your DatePicker.

Display the date in UTC by adding UTC: true to the formatOptions (Optional).
Store the date in UTC by adding displayFormat: 'Date' to the constraints.

In sap.ui.model.odata.v2.ODataModel, this type (sap.ui.model.odata.type.DateTime) is represented as a Date. With the constraint displayFormat: 'Date', the time zone is UTC and the time part is ignored.

(...) In this case, only the date part is used, the time part is always 00:00:00, and the time zone is UTC to avoid time-zone-related problems.

Here is a live demo:

sap.ui.getCore().attachInit(() => sap.ui.require([
  "sap/ui/model/odata/v2/ODataModel",
  "sap/ui/core/mvc/XMLView",
], function(ODataModel, XMLView) {
  "use strict";

  const model = new ODataModel({
    serviceUrl: [
      "https://cors-anywhere.herokuapp.com/", // proxy
      "https://services.odata.org/V2/(S(SO46024229))/OData/OData.svc",
    ].join(""),
    defaultBindingMode: "TwoWay",
    preliminaryContext: true,
    tokenHandling: false, // service does not provide CSRF tokens
  });

  Promise.all([
    sap.ui.getCore().loadLibrary("sap.m", true),
    sap.ui.getCore().loadLibrary("sap.ui.unified", true),
  ]).then(() => XMLView.create({
    definition: `<mvc:View xmlns:mvc="sap.ui.core.mvc" height="100%">
      <DatePicker id="dp" xmlns="sap.m" width="auto" placeholder="Date"
        binding="{
          path: '/Products(0)',
          parameters: {
            select: 'ID,ReleaseDate'
          }
        }"
        value="{
          path: 'ReleaseDate',
          type: 'sap.ui.model.odata.type.DateTime',
          constraints: {
            displayFormat: 'Date',
            nullable: false
          }
        }"
      />
    </mvc:View>`,
    models: model,
    afterInit: function() {
      const fn = e => e.getSource().getBindingContext().getModel().submitChanges();
      this.byId("dp").attachChange(fn);
    },
  }).then(view => {
    const messageManager = sap.ui.getCore().getMessageManager();
    messageManager.registerObject(view.placeAt("content"), true);
  }));
}));

<script id="sap-ui-bootstrap" src="https://ui5.sap.com/resources/sap-ui-core.js"
  data-sap-ui-libs="sap.ui.core"
  data-sap-ui-theme="sap_fiori_3"
  data-sap-ui-async="true"
  data-sap-ui-compatversion="edge"
  data-sap-ui-modules="sap/ui/thirdparty/datajs"
  data-sap-ui-xx-waitfortheme="rendering"
></script><body id="content" class="sapUiBody sapUiSizeCompact"></body>

Categories

sapui5 - Date Mismatch in UI5 Application

sapui5 - Date Mismatch in UI5 Application

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags