Date Mismatch in UI5 Application

Question

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

Answer 1

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: `
      
    `,
    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);
  }));
}));

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