javascript - 如果值为空，则 sap.m.Text 的日期格式化程序不可见

Question

我有一个 sap.m.Label 和 sap.m.Text。我从后端获得的值要么是 NULL，要么是像这样的日期对象 Tue Oct 01 2019 02:00:00 GMT+0200。

我想使用格式化程序将 Tue Oct 01 2019 02:00:00 GMT+0200 转换为 Oct 01, 2019 并且如果后面的值- end 为 NULL 则 sap.m.Label 和 sap.m.Text 均应不可见。

这是我的 XML:

<Label text="{i18n>ZZDATAB}" id="StartDateLbl" 
  visible="{
    path:'itemDetailData>/StartDate',
    formatter:'ui.s2p.srm.sc.approve.util.Formatter.showElementOnUi'
  }">
  <layoutData>
    <sap.ui.layout:ResponsiveFlowLayoutData minWidth="192" weight="3"></sap.ui.layout:ResponsiveFlowLayoutData>
  </layoutData>
</Label>
<Text 
  text="{
    path:'itemDetailData>/StartDate',
    formatter:'ui.s2p.srm.sc.approve.util.Formatter.formatDateZ'
  }" 
  visible="{
    path:'itemDetailData>/StartDate',
    formatter:'ui.s2p.srm.sc.approve.util.Formatter.showElementOnUi'
  }"
  id="StartDateTxt" maxLines="0">
  <layoutData>
    <sap.ui.layout:ResponsiveFlowLayoutData weight="5"></sap.ui.layout:ResponsiveFlowLayoutData>
  </layoutData>
</Text>

我的格式化程序:

ui.s2p.srm.sc.approve.util.Formatter.formatDateZ = function (d) {
    if (d === "" || d === null || typeof(d) === "undefined") {
        return "";
    } else if (typeof(d) === "object") {
        var u = new Date(d);
        var s = u.toString();

        var result = s.substring(4, 10) + ", " + s.substring(11, 16);

        return result;
    }
    return "";
};

ui.s2p.srm.sc.approve.util.Formatter.showElementOnUi = function(obj) {
    if (obj === '') {
        return false;
    } else {
        return true;
    }
};

问题:如果我调试后端并使 itemDetailData>/StartDate 为空，输出仍然显示这些标签，即使它们应该是不可见的:

Start Date:
End Date:

Answer 1

您可以使用Expression Binding .

您可以使用 sap.ui.model.type.DateTime 格式化日期对象 和风格中等(例如 2019 年 12 月 31 日)

<Label text="{i18n>ZZDATAB}" id="StartDateLbl" visible="{= ${itemDetailData>/StartDate} !== null}">
  <layoutData>
    <sap.ui.layout:ResponsiveFlowLayoutData minWidth="192" weight="3"></sap.ui.layout:ResponsiveFlowLayoutData>
  </layoutData>
</Label>
<Text 
  text="{path : 'itemDetailData>/StartDate', type : 'sap.ui.model.type.DateTime', formatOptions:{ style: 'medium'}}" visible="{= ${itemDetailData>/StartDate} !== null}" id="StartDateTxt" maxLines="0">
  <layoutData>
    <sap.ui.layout:ResponsiveFlowLayoutData weight="5"></sap.ui.layout:ResponsiveFlowLayoutData>
  </layoutData>
</Text>