Date Mismatch in UI5 Application

后端未结

关注

 2  1376

I have a DatePicker in UI5 application. My server is in Australia. When I create any record in IST time, it is working fine. But when a user tries to create any record in Au

相关标签:

2条回答

星月不相逢

2020-12-12 05:47

   prepareDatesToDisplay: function(oDate){ //to display dates from backend
                var oTempDate = new Date(oDate);
                oDate = new Date(oTempDate.getTime() + oTempDate.getTimezoneOffset() * (60000));
                return oDate;
    },
    changeDateToUTC: function(oDate){ //for sending dates to backend
                var oTempDate = new Date(oDate.setHours("00","00","00","00"));
                oDate = new Date(oTempDate.getTime() + oTempDate.getTimezoneOffset() * (-60000));
                return oDate;
    },

0 讨论(0)

情歌与酒

2020-12-12 05:55

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>

The internal module datajs parses the incoming Emd.DateTime string in native JS date object, and the module sap.ui.model.odata.type.DateTime stores it in the model as long as the constraints aren't violated.

Reference

Documentation topic: Date and Time Related Controls: Data Binding
API reference: sap.ui.model.odata.type.DateTime

0 讨论(0)