SAP UI5 日期类型 sap.ui.model.type.Date 的显示格式问题分析
  I7JaHrFMuDsU 2024年08月09日 37 0

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

#yyds干货盘点# SAP UI5 日期类型 sap.ui.model.type.Date 的显示格式问题分析

<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

#yyds干货盘点# SAP UI5 日期类型 sap.ui.model.type.Date 的显示格式问题分析

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

在前一篇文章,我们已经排除了这个问题是由于数据解析错误造成的,因为在 DateFormat.js 的 _format 方法输入参数 oJSDate,已经能够观察到正确从本地 JSON 文件解析出的包含了小时,分,秒的时间值:Thu Apr 02 2015 01:20:30 GMT+0800 (China Standard Time)

#yyds干货盘点# SAP UI5 日期类型 sap.ui.model.type.Date 的显示格式问题分析

#yyds干货盘点# SAP UI5 日期类型 sap.ui.model.type.Date 的显示格式问题分析

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

#yyds干货盘点# SAP UI5 日期类型 sap.ui.model.type.Date 的显示格式问题分析

分析 aFormatArray 的数据源:

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

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

#yyds干货盘点# SAP UI5 日期类型 sap.ui.model.type.Date 的显示格式问题分析

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

#yyds干货盘点# SAP UI5 日期类型 sap.ui.model.type.Date 的显示格式问题分析

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);

#yyds干货盘点# SAP UI5 日期类型 sap.ui.model.type.Date 的显示格式问题分析

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

#yyds干货盘点# SAP UI5 日期类型 sap.ui.model.type.Date 的显示格式问题分析

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);
		},

style 支持 full,而我指定的是 long.

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

#yyds干货盘点# SAP UI5 日期类型 sap.ui.model.type.Date 的显示格式问题分析

【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2024年08月09日 0

暂无评论

推荐阅读
  TEZNKK3IfmPf   2024年08月09日   56   0   0 javascript前端
I7JaHrFMuDsU