1

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 Australia, the date value is incremented by 1. That is "31" coming as "32". Do I need to consider the time zone?

Boghyon Hoffmann
  • 17,103
  • 12
  • 72
  • 170
karthik stj
  • 57
  • 2
  • 5
  • Let us know, by clicking on the checkmark, if one of the answers was helpful to resolve the issue. Read _[What should I do when someone answers my question?](https://stackoverflow.com/help/someone-answers)_ – Boghyon Hoffmann May 15 '20 at 13:43

2 Answers2

2

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

Boghyon Hoffmann
  • 17,103
  • 12
  • 72
  • 170
0
   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;
    },
adirocks27
  • 51
  • 3
  • 10