Formatting a date from an ODataModel in a SAPUI5 table

Question

I have got a SAPUI5 table that is populated from an OData Model. One of its columns is a date/time field that I'd like to format, but I can't figure out how to do it in SUI5.

This is what I'm doing now:

var tableModel = new sap.ui.model.odata.ODataModel("...");
var table = new sap.ui.table.DataTable();
table.setModel(tableModel);
table.addColumn(new sap.ui.table.Column({
    label: new sap.ui.commons.Label({text: "Date"}),
    template: new sap.ui.commons.TextView().bindProperty("text", "DATE"),
    sortProperty: "DATE",
    filterProperty: "DATE"
}));

Here's the first couple of lines of output (my browser language is German):

All I want to do is change the date and time format to, say, mm/dd/yyyy hh:mm

I did some searching, and the following question is exactly my problem - but there is an accepted answer that either I do not understand or that does not actually solve the problem: Date format in a table SAPUI5

I realize this might be a trivial question and I just missed how to do this easily, or it is dealt with in one of the official tutorials. In that case, please just point me to it in the comments and I will delete this question.

Answer 1

use formatter-function:

var tableModel = new sap.ui.model.odata.ODataModel("...");
var table = new sap.ui.table.DataTable();
table.setModel(tableModel);
table.addColumn(new sap.ui.table.Column({
    label: new sap.ui.commons.Label({text: "Date"}),
    template: new sap.ui.commons.TextView({
        text : { 
            path : 'DATE',
            formatter : function(value){
                return /* TODO: some format logic */;
            }
        }
    }),
    sortProperty: "DATE",
    filterProperty: "DATE"
}));

Answer 2

Using a formatter function is very flexible, but if you're looking for something simpler without having to write your own format logic, you can consider using the type property rather than the formatter like this:

template: new sap.ui.commons.TextView().bindProperty("text", {
  path: "OrderDate",
  type: new sap.ui.model.type.Date({pattern: "MM/dd/yyyy hh:mm"})
})

Answer 3

May also be worth considering the standard model formatters: sap.ui.model.type.DateTime and sap.ui.model.type.Date

template: new sap.ui.commons.TextView().bindProperty("text", {
  path: "DATE",
  type: new sap.ui.model.type.DateTime,
  formatOptions: { style: "medium" }
})

XML example (as always use XML ;)

<Text text="{path : 'runDateTime', 
             type : 'sap.ui.model.type.DateTime',
             formatOptions: { style : 'medium'}}" />

Since using UI5 is often a conversation about applying a standard view for an application, using the standard formatting may be a useful idea.

Answer 4

I am also adding how to format numbers using the formatter function.

 <template> = new sap.ui.commons.TextField().bindProperty("<value>",{
          path: "<GROSSVALUE>",
          type: new sap.ui.model.type.Integer({
              maxIntegerDigits: 10,
              minFractionDigits: 2,
              maxFractionDigits: 2,
              groupingEnabled: true,
              groupingSeparator: ",",
              decimalSeparator: "."
            })});