我開發了一個 SAP UI5 應用，使用了資料型別 `sap.ui.model.type.Date`，並且指定了顯示格式 `pattern` 為：`yyyy-MM-ddTHH:mm:ss`：

![](https://img-blog.csdnimg.cn/img_convert/bccff628bcf83962017b152864d1770d.png)

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

這個欄位繫結的資料來源的值為：2015-04-01T01:20:59

我期望在 SAP UI5 上顯示的格式為 `某年-某月-某日-T-小時-分-秒`，但是最後的顯示效果如下圖：April 1，2015

![](https://img-blog.csdnimg.cn/img_convert/e365311eb47f60abf544cf3954089625.png)

本文介紹如何分析這個顯示格式的問題。

我們在 Chrome 開發者工具裡找到 `sap.ui.model.type.Date` 的實現檔案地址：

`sap/ui/model/type/Date.js`
![](https://img-blog.csdnimg.cn/img_convert/1bc5dfe3f1461d478b4b0ec04782edba.png)

首先在函式 `Date1.prototype.formatValue` 設定斷點，觀察到字串型別的原始值，已經成功傳入該函式了：

![](https://img-blog.csdnimg.cn/img_convert/368bdbf8bf70b7a43b179baa22d79b51.png)

`sInternalType` 的值：`string`

![](https://img-blog.csdnimg.cn/img_convert/1bf3956472264c5aa7719fe949ce8948.png)

string 型別的 `PrimitiveType` 值就為其本身。

該邏輯定義在如下函式里：

```javascript
SimpleType.prototype.getPrimitiveType = function (sInternalType) {
		// Avoid dealing with type objects, unless really necessary
		switch (sInternalType) {
			case "any":
			case "boolean":
			case "int":
			case "float":
			case "string":
			case "object":
				return sInternalType;
			default:
				var oInternalType = DataType.getType(sInternalType);
				return oInternalType && oInternalType.getPrimitiveType().getName();
		}
	};
```

從模型中拿到格式資料的模板：

![](https://img-blog.csdnimg.cn/img_convert/be2a4647a101e9675920fb5ccb8a9bf6.png)

比如一週七天的縮寫單詞，儲存在 `aDaysAbbrev` 裡：
![](https://img-blog.csdnimg.cn/img_convert/98d761275e70796c07a0b1a1ccb91798.png)

一年 12 個月的單詞，儲存在 `aMonthsWide` 裡：
![](https://img-blog.csdnimg.cn/img_convert/b7d94c07470d51502959b9e62f8bde7c.png)

進入 parse 函式內部，Calendar type 為：`Gregorian`，意思是`陽曆`。

![](https://img-blog.csdnimg.cn/img_convert/edd50dc7a516bf46fd19071de5b4c6ce.png)

Calendar type 為列舉值，所有支援的 calendar 型別如下圖所示：

![](https://img-blog.csdnimg.cn/img_convert/29756c13d43bf693e8eb3e4ce909cf63.png)

格式化陣列的值：`aFormatArray`
![](https://img-blog.csdnimg.cn/img_convert/89c2026937ad03f1577dfb1b90c16954.png)

已經成功解析出 2015年4月2日了：

![](https://img-blog.csdnimg.cn/img_convert/e12c0749513376b0c65736fb72225ee0.png)

開始解析：`T01:20:30`

![](https://img-blog.csdnimg.cn/img_convert/ec97e141948e3fbc658cfd6eb46130db.png)

所有可能的`日期分隔符`：

```shell
\u002d\u007E\u2010\u2011\u2012\u2013\u2014\ufe58\ufe63\uff0d\uFF5E
```

![](https://img-blog.csdnimg.cn/img_convert/84f5bf0484fe94ca95cf0152d618decb.png)

在 `Dateformat.js` 函式的 `_parse` 函式的返回值，已經觀察到小時，分和秒已經成功解析了。所以問題沒有出在解析，而是在值的顯示上。

![](https://img-blog.csdnimg.cn/img_convert/c27cc72974e73d353c9b7793eb0b2a36.png)

最後返回的值：Thu Apr 02 2015 01:20:30 GMT+0800 (China Standard Time

![](https://img-blog.csdnimg.cn/img_convert/be87aaa27c94aa4e1e1fcbc79cddfa00.png)

更多Jerry的原創文章，盡在："汪子熙".

SAP UI5 日期型別 sap.ui.model.type.Date 的解析格式問題分析

相關文章