SAP UI5 日期类型 sap.ui.model.type.Date 的显示格式问题分析

简介: SAP UI5 日期类型 sap.ui.model.type.Date 的显示格式问题分析

我开发了一个 SAP UI5 应用,使用了数据类型 sap.ui.model.type.Date,并且指定了显示格式 pattern 为:yyyy-MM-ddTHH:mm:ss

<ObjectAttribute title="{i18n>dateTitle}" text="{
                    path: 'invoice>ShippedDate',
                    type: 'sap.ui.model.type.Date',
                    formatOptions: {
                      style: 'long',
                      source: {
                        pattern: 'yyyy-MM-ddTHH:mm:ss'
                      }
                    }
                  }"/>

这个字段绑定的数据源的值为:2015-04-01T01:20:59

我期望在 SAP UI5 上显示的格式为 某年-某月-某日-T-小时-分-秒,但是最后的显示效果如下图:April 1,2015

本文介绍如何分析这个显示格式的问题。

在前一篇文章,我们已经排除了这个问题是由于数据解析错误造成的,因为在 DateFormat.js

_format 方法输入参数 oJSDate,已经能够观察到正确从本地 JSON 文件解析出的包含了小时,分,秒的时间值:Thu Apr 02 2015 01:20:30 GMT+0800 (China Standard Time)

this.aFormatArray 只包含了五条记录,不含小时,分,秒,因此最后输出的时间只有年月日。

分析 aFormatArray 的数据源:

this.aFormatArray = this.parseCldrDatePattern(this.oFormatOptions.pattern);

运行时调试:this.oFormatOptions.pattern 的值为 MMddyyyy

我们在 xml 视图里指定的 pattern,可以在 callstack 里看到:

XML 视图地址,位于 一套适合 SAP UI5 开发人员循序渐进的学习教程 步骤第 34:

pattern: ‘yyyy-MM-ddTHH:mm:ss’

我们 xml 视图里只提供了 source-pattern,而不是 pattern,因此,SAP UI5 框架,需要调用如下代码来生成 pattern:

oFormat.oFormatOptions.pattern = oInfo.getPattern(oFormat.oLocaleData, oFormat.oFormatOptions.style, oFormat.oFormatOptions.calendarType);

从 SAP UI5 生成 Pattern 的逻辑来查看,我们 xml 视图里提供的 pattern 没有作为输入参数被考虑:

getDatePattern: function(sStyle, sCalendarType) {
      assert(sStyle == "short" || sStyle == "medium" || sStyle == "long" || sStyle == "full", "sStyle must be short, medium, long or full");
      return this._get(getCLDRCalendarName(sCalendarType), "dateFormats", sStyle);
    },

如果设置成 full,显示效果如下:Thursday, April 2, 2015

相关文章
|
4月前
|
前端开发 搜索推荐 开发者
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
|
4月前
|
JavaScript 前端开发 开发者
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
|
4月前
|
Web App开发 数据采集 前端开发
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
|
4月前
|
XML 存储 数据格式
SAP UI5 控件 customData 属性的应用介绍
SAP UI5 控件 customData 属性的应用介绍
|
4月前
|
前端开发 JavaScript API
SAP UI5 sap.ui.require.toUrl 的作用介绍
SAP UI5 sap.ui.require.toUrl 的作用介绍
|
4月前
|
JSON 前端开发 测试技术
SAP UI5 sap.ui.core.util.MockServer.simulate 方法介绍
SAP UI5 sap.ui.core.util.MockServer.simulate 方法介绍
|
4月前
|
存储 安全 测试技术
使用 Visual Studio Code 创建 SAP UI5 项目遇到 self-signed security certificate 相关问题
使用 Visual Studio Code 创建 SAP UI5 项目遇到 self-signed security certificate 相关问题
|
4月前
|
开发者 UED
SAP UI5 SmartFilterBar 中 ControlConfiguration Aggregation 的作用介绍
SAP UI5 SmartFilterBar 中 ControlConfiguration Aggregation 的作用介绍
|
2月前
Element UI 日期选择器el-date-picker禁止选择指定日期(禁止选择过去,禁止选择未来)【含是否包含今天】
Element UI 日期选择器el-date-picker禁止选择指定日期(禁止选择过去,禁止选择未来)【含是否包含今天】
115 3
|
2月前
Element UI【组件拓展】el-datetime-picker-before 禁止选择未来时间的日期时间选择器(精确到时分秒)
Element UI【组件拓展】el-datetime-picker-before 禁止选择未来时间的日期时间选择器(精确到时分秒)
61 1