如何将 OData 服务中的日期/时间正确添加到 UI？

Question

背景

我正在创建一个小演示页面，显示 UI5 的一些直接功能。此页面由两个主要页面组成：

• 在第一页，有一个可以创建、删除和更新的运营商列表。这些运营商有一个 ID (

  Carrid

  )。
• 如果单击某个承运商，他们将被路由到第二页，其中所选承运商的所有航班都显示在表格中（以及有关航班的一些信息）。

表格如下所示：

<Table id="detailTable" inset="false" class="sapUiResponsiveMargin">
    <columns>
        <Column>
            <Text text="ID" />
        </Column>
        <Column>
            <Text text="Flightnumber" />
        </Column>
        <Column>
            <Text text="Starts in" />
        </Column>
        <Column>
            <Text text="Departs at" />   
        </Column> 
        <Column>
            <Text text="Lands in" />   
        </Column> 
        <Column>
            <Text text="Lands at" />   
        </Column>
    </columns>
</Table>

使用以下代码将数据绑定到列：

// Get routing data and show only entrys with the matched primary key (Carrid)
_onRouteMatched: function(oEvent) {
    // ...
    var oArgs = oEvent.getParameter("arguments");
    var oFlightTable = oView.byId("detailTable");
    oFlightTable.bindAggregation("items", {
        path: "/CarrierSet(" + "'" + oArgs.flightPath + "'" + ")/FlightSet",
        template: new sap.m.ColumnListItem({
            cells: [
                new sap.m.Text({
                    text: "{Carrid}"
                }),
                new sap.m.Text({
                    text: "{Connid}"
                }),
                new sap.m.Text({
                    text: "{Cityfrom}"
                }),
                new sap.m.Text({
                    text: "{Deptime}"
                }),
                new sap.m.Text({
                    text: "{Cityto}"
                }),
                new sap.m.Text({
                    text: "{Arrtime}"
                })
            ]
        })
    });
}

问题

如果可以在不先操作数据的情况下显示数据，则代码可以正常工作。但是字段

{Deptime}

和

{Arrtime}

的类型为 Edm.Time，我需要首先对其进行转换，以便以人类可读的形式显示它。
我能够用这段代码实现这一点（我知道，这不是最有效的方法，但我仍在学习。因此，如果您有任何改进，请随时发布）：

pageTable.addEventDelegate({
    onAfterRendering: function() {
        var mTable = this.getView("FilterBarSimple").byId("detailTable");
        var mModel = mTable.getModel();
        var aItems = mTable.getItems();

        // ----- TIME CONVERSION ----

        var arrayTime = [];
        for (var iTime = 0; iTime < aItems.length; iTime++) {
            var iAdded = mModel.getProperty("Deptime", aItems[iTime].getBindingContext());
            arrayTime.push(iAdded);
        }
        var timeFormat = sap.ui.core.format.DateFormat.getTimeInstance({
            pattern: "kk:mm:ss"
        });
        var tz = new Date(0).getTimezoneOffset() * 60 * 1000;
        var arrayTimeClean = [];
        $.each(arrayTime, function(ii, ee) {
            var timeStr = timeFormat.format(new Date(ee.ms + tz));
            arrayTimeClean.push(timeStr);
        });
    }
});

这会生成正确的输出：

但是我无法再次正确地将这些被操纵的数据绑定到表中。我已经尝试过使用

OData.read()

函数和其他一些相当老套的方法，但我从未成功，而且我已经被这个问题困扰了一段时间了。

如果有人有想法或建议，请告诉我，我将非常感激。

Answer 1

如果您只想以人类可读的形式显示

time、date 或 timestamp，则无需使用“hacky 方法”或自定义格式化程序。定义属性绑定时，您可以利用名为 Data Types (type

)

^{doc 的 UI5 概念，其中：}

让框架
• 格式化， 解析，并验证根据设置的formatOptions

  和

  constraints

  为您提供值。

与
• formatter

   相比，支持双向绑定（另请参阅

  分配绑定模式）。

type

的

Edm.Time

应该是

sap/ui/model/odata/type/Time

的实例。

^{API看看这个（IMO必读）文档}“日期、时间、时间戳和时区” .

示例（OData V2）

<Table xmlns="sap.m"
  xmlns:core="sap.ui.core"
  core:require="{
    TypeForODataV2DateOnly: 'sap/ui/model/odata/type/DateTime',
    TypeForODataV2Time: 'sap/ui/model/odata/type/Time',
    TypeForODataTimestamp: 'sap/ui/model/odata/type/DateTimeOffset'
  }"
  items="{/MyEntitySet}"
><!-- ... -->
  <ColumnListItem>
    <!-- For OData V2 entity properties with Type="Edm.DateTime" and sap:display-format="Date" -->
    <Text text="{
      path: 'MyTimeZoneIndependentDate',
      type: 'TypeForODataV2DateOnly',
      constraints: {
        displayFormat: 'Date'
      }
    }" />
    <!-- For OData V2 entity properties with Type="Edm.Time" -->
    <Text text="{
      path: 'MyTimeZoneIndependentTime',
      type: 'TypeForODataV2Time',
      formatOptions: { style: 'long' }
    }" />
    <!-- For OData entity properties with Type="Edm.DateTimeOffset" -->
    <DateTimePicker value="{
      path: 'MyTimestamp',
      type: 'TypeForODataTimestamp'
    }" />
    <!-- Applies also to other controls such as DatePicker, TimePicker, etc. -->
  </ColumnListItem>
</Table>

演示：

https://embed.plnkr.co/F3t6gI8TPUZwCOnA

注意：有关 core:require

 语法，请参阅 

“在 XML 视图和片段中需要模块”，该语法从 UI5 1.69 开始受支持。对于较低版本，请使用 type: 'sap.ui.model.odata.type.<...>'

。

---

TL；博士

查看主题

“日期、时间、时间戳和时区” 中的第一个表，仔细检查该表是否正确设置了 $metadata

 响应中的相关 EDM 类型，并使用属性绑定中对应的

sap/ui/model/odata/type/<...>

：

<ThatControl xmlns="..."
  xmlns:core="sap.ui.core"
  core:require="{ ThatType: 'sap/ui/model/odata/type/<...>' }"
  value="{
    path: 'myODataModel>MyEntityProperty',
    type: 'ThatType', (Optional in OData V4.* Required in V2.)
    formatOptions: {...}, (Optional)
    constraints: {
      displayFormat: 'Date' (Required in V2 if Type = Edm.DateTime with sap:display-format = Date)
    }
  }"
>

* 在 V4 中，OData 属性绑定会自动为您确定 ^type

，除非它具有 

targetType: 'any'

。

更多相关 OData V2 和 V4 示例：

https://sdk.openui5.org/entity/sap.ui.model.odata.type

Answer 2

<Label text="{template>Version/Major}.{template>Version/Minor}.{template>Version/Build} - {
              path: 'template>CreationDate',
              type: 'sap.ui.model.odata.type.DateTimeOffset',
              constraints: {
                precision: 3,
                v4: true
              },
              formatOptions: {
                pattern: 'dd. MM. yyyy - HH:mm:ss' 
              }
            } {template>Creator/username}"/>

参见：

https://github.com/SAP/openui5/issues/1332#issuecomment-279339525