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

注销發表於2022-02-20
UI型別

我開發了一個 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

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

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

sap/ui/model/type/Date.js

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

sInternalType 的值：string

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

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

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

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

比如一週七天的縮寫單詞，儲存在 aDaysAbbrev 裡：

一年 12 個月的單詞，儲存在 aMonthsWide 裡：

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

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

格式化陣列的值：aFormatArray

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

開始解析：T01:20:30

所有可能的日期分隔符：

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

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

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

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

相關文章