OData Edm.DateTime - How to Display Date Only

Question

In UI5, my OData is returning the date in the following format:

Mon Apr 09 2018 01:00:00 GMT+0100 (GMT Daylight Time)

I would like to format it to: 09/04/2018

I have tried the following without any results:

<Text text="{                            
  path: 'MyoDataService>ExecuteDay',
  type: 'sap.ui.model.type.Date',
  formatOptions: {
    pattern: 'yyyy/MM/dd'
  }
}"/>

Another example I have tried and It is not working neither:

<Text text="{
  path:'MyoDataService>ExecuteDay',
  type: 'sap.ui.model.type.Date',
  formatOptions: {
    source: {
      pattern: 'yyyy-MM-ddTHH:mm:ss'
    },
    pattern: 'dd MMM yyyy'
  }
}" />

The controller where the model gets created looks like this:

onInit: function() {
  var sServiceUrl = "http://myurl/myservice";
  var oModel = new sap.ui.model.odata.ODataModel(sServiceUrl,true);
  var oJsonModel = new sap.ui.model.json.JSONModel();
  oModel.read("/MyEntitySet", null, null, true, function(oData, response) {
    oJsonModel.setData(oData);
  });
  this.getView().setModel(oJsonModel, "MyEntitySet");
},

Answer 1

Have you tried using a formatter-function ?

path : 'MyoDataService>ExecuteDay',
     formatter : function(value) {
       return /* your format logic here */;
     }

Answer 2

If you are using OData protocol, you'll need to use the appropriate data type as well (instead of simple types).

Take a look at your service metadata and look for the EDM type that is assigned to the entity property. For example:

Given

<Property Name="BirthDate" Type="Edm.DateTime"/>

^{OData V2 entity property}

Property Binding (Date only)

<Text text="{                            
  path: 'myODataModel>BirthDate',
  type: 'sap.ui.model.odata.type.DateTime',
  constraints: {
    displayFormat: 'Date'
  }
}"/>

• The constraint displayFormat enables us to display only the date part of the DateTime value.

  may be "Date", 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. ^[source]

• There is also the EDM type Date but it's intended to be used for OData V4 services only.

  For an OData V2 service, use sap.ui.model.odata.type.DateTime with the constraint displayFormat: "Date" to display only a date. ^[source]

• Most of the times, there is no need to alter the pattern within formatOptions since the framework already detects the user locale and displays the date accordingly.

---

The "not working" part

^{(For question author only)}

As it turned out in the question, "not working" was actually referring to the data not being in the UI at all rather than data being improperly formatted.

Thanks to the 6th revision, we can see that the main cause lies in the way of how the M in MVC was handled in onInit. As there are several issues, let's tackle them one by one..:

1. In order to display the data in the first place, the model names (one when setting the model and one when defining the binding path) must be identical to each other. This was, however, not the case in your code:

   this.getView().setModel(/*...*/, "MyEntitySet");
   

   <Text text="{
    path: 'MyoDataService>...'
   

   The second argument in setModel^[API] refers to the name that is used in the binding path. Since there was no model set with the name "MyoDataService", the framework couldn't know that it should have retrieved the data from "MyEntitySet" model. For more information, please read the documentation topic Binding Syntax and the underlying topic Binding Path thoroughly.

2. Not sure where you got the snippet from but sap.ui.model.odata.ODataModel^[API] is an ancient module which has been deprecated for a long time. It also sends many requests synchronously which degrades UX due to the blocking behavior of the UI thread.

   Synchronous XMLHttpRequest outside of workers is in the process of being removed from the web platform as it has detrimental effects to the end user’s experience. ^[source]

   Please, use v2.ODataModel instead.

3. There is no need for an intermediate JSONModel to handle backend data. JSONModel is a client-side model which is not intended to be used for handling OData related stuff. Otherwise, you're going to invent the wheel again since the ODataModel and its binding already support sending optimized requests efficiently without having to download the whole set of entities. Here is an example: https://embed.plnkr.co/lBreXFg9ozLcvMCN. The example also shows various binding types (Context binding, List Binding, Property Binding, etc..) and their syntax. In OData V4, you won't be even able to call .read directly. It's good to get used to binding OData in the view directly.

For further understanding and best practices, please follow the Walkthrough steps carefully and try to understand every single sentence there.