0%

How to display OData json date in SAPUI5 view

OData的日期类型无法原样显示在SAPUI5的页面上,怎样解决这一问题。

  1. Date String Received from OData.
    Date string from OData Service is like below:

    1
    "SalesOrderDate": "/Date(1587945600000)/",

    这样的数据无法直接显示在SAPUI5的View里面。
    即便你设置data type为日期类型,也是无法直接识别的。

  2. Create your date formatter.

在View的Controller里创建自己的formatter,然后在View中进行相应的设置。
JS代码中用到了正规法则,识别一段字符串中的数字,然后将这一串数字作为timestamp来生成一个Date类型的变量,
再通过sap.ui.core.format.DateFormat来设置格式。

1
2
3
4
5
6
7
8
9
10
11
12
13
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/core/format/DateFormat"
], function (Controller,DateFormat) {


formatJSONDate: function(sDate){
var oDateFormat = DateFormat.getDateTimeInstance({
style: "short"
});
var d = new Date(sDate.match(/\d+/)[0] * 1);
return oDateFormat.format(d,true); //true for UTC
}
  1. Use your formatter in your view.
    View中对UI控件设置formatter
    1
    2
    3
    4
    <Text text="{
    path: '/Date',
    formatter: '.formatJSONDate'
    }" />