How to use custom date format an OData V4 Edm.DateTime value

Question

I am struggling to format an OData V4 Edm.DateTime value. When I declare it as normal datetime value

<Label text="{ams>Major}.{ams>Minor}.{ams>Build} (
        { 
          path: 'ams>CreationDate', 
          type: 'sap.ui.model.type.Date', 
          formatOptions: {
            pattern: 'yyyy/MM/dd'
          }
        })"/>

I get following error:

TypeError: j.getTime is not a function

If I declare it using the OData data type, nothing is formatted.

<Label text="{ams>Major}.{ams>Minor}.{ams>Build} (
        { 
          path: 'ams>CreationDate', 
          type: 'sap.ui.model.odata.type.Date', 
          formatOptions: {
            pattern: 'yyyy/MM/dd'
          }
        })"/>

Puts out e.g.:

2016-11-21T17:13:56.207+01:00

Is there any possibility to format it directly in the XML template, or do I have to use a custom formatter?

Answer 1

I would use a custom formatter. They were created for this kind of task, and if you have multiple dates, you can re-use the same formatter (which is cool).

Answer 2

Improved Answer:

As pointed out by the SAP support this is the way to go when using OData V4:

<Text text="{
              path: 'agent>/CurrentVersion/CreationDate',
              type: 'sap.ui.model.odata.type.DateTimeOffset',
              constraints: {
                precision: 3,
                v4: true
              },
              formatOptions: {
                pattern: 'dd. MM. yyyy'
              }
            }"
            tooltip="{
              path: 'agent>/CurrentVersion/CreationDate',
              type: 'sap.ui.model.odata.type.DateTimeOffset',
              constraints: {
                precision: 3,
                v4: true
              },
              formatOptions: {
                pattern: 'dd. MM. yyyy - hh:mm:ss'
              }
            }"/>

The important part is to give the precision. My OData Service (ASP.NET WEB API) returns datetimeoffset with milliseconds. Therefore, the precision has to be set to 3.

Original Answer:

In addition, as I had some problems, here is my approach with a custom formatter:

The reason, why you cannot use the common Date format is, that the odata value comes as a string. I used a custom formatter on my controller and the dateformat.js scripts.

<Label text="{parts: [{path: 'mymodel>CreationDate', type: 'sap.ui.model.odata.type.Date'},
                        {path: 'i18n>global.dateformat', type: 'sap.ui.model.type.String'}],
                formatter: '.odatadateformatter'}"/>

Here is my formatter code (typescript):

var dateFormat: DateFormatStatic;
...
odatadateformatter(datetime: sap.ui.model.odata.type.Date, format?: string): string {
            if(!format)
                format = "yy-mm-dd:hh:MM:ss";
            return dateFormat(new Date(datetime), format);
        }

Any other approaches lead to errors. You can now adjust your date accordingly to your i18n information, so you can use different formats for different countries. I think there is also an option to put in a locale in the dateFormat(...) function