SAP UI5應用裡型別為Edm.DateTime的日期控制元件設計原理
Recently I was struggled with a customer incident and finally I realized that I didn’t understand the Edm.DateTime quite clearly. So I spend some time to do research on it to fix my knowledge gap. I list my learning here in case any other guy needs it as well. For my study, I use this field in my application for example.
It is bound to json model field “ClosingDate” with a formatter.
In the metadata, this field is defined with type Edm.DateTime (Represents date and time with values ranging from 12:00:00 midnight, January 1, 1753 A.D. through 11:59:59 P.M, December 9999 A.D.)
After I change the closingDate to 2015-10-3 and save the change:
The saved opportunity is reread from backend with an odata request. In Chrome network tab I observed the closingDate has this format: /Date(1443830400000)/:
What makes me curious is when I directly paste the url of the odata request to Chrome or SAP gateway client, I get the closingDate with this format instead. The figure below is response in Chrome:
And this is response from gateway client.
Why is there difference between them? And when I type “alert(new Date(1443830400000));” in chrome console, I get this popup:
Actually it ( 2015-10-03 08:00:00 GMT +0800 ) points to exactly the same time as 2015-10-03 00:00:00 UTC.
So how could the date with format /Date(1443830400000)/ be consumed in my application?
It makes sense to start debugging via the framework handler when the response of odata request ( Opportunity re-read after closing date is changed ) is successfully returned:
check the body field:
The aim is to figure out how framework parses this /Date(1443744000000)/. Then I reached the place:
(1) there is a regular expression which extracts the number 1443744000000 from the input string.
(2) a local time is returned by new Date(), with the number parsed by previous step passed in. The local time is returned based on current Time zone configured in my laptop.
Thanks to the framework, which has parsed the raw json response string to Javascript object, so that we application could directly use the converted object to bind our model.
Then the local time returned by framework will be passed into my formatter so now I could do any formatting based on customer requirement:
要獲取更多Jerry的原創文章,請關注公眾號"汪子熙":
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/24475491/viewspace-2717876/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- SAP UI5 應用裡 FlexBox 控制元件的設計原理UIFlex控制元件
- SAP UI5 應用裡一些容器控制元件的介紹UI控制元件
- SAP UI5應用裡的列表處理UI
- SAP UI5 應用 SimpleForm 控制元件 ResponsiveGridLayout 佈局的工作原理深入剖析UIORM控制元件
- SAP UI5 應用 index.html 裡引導 script 屬性的解析原理UIIndexHTML
- SAP UI5 日期型別 sap.ui.model.type.Date 的解析格式問題分析UI型別
- 如何在postman裡為型別為Edm.DateTime的OData引數指定正確格式的值Postman型別
- SAP UI5應用裡的頁面路由處理UI路由
- SAP UI5應用裡搜尋功能的實現UI
- SAP Fiori應用裡日期格式的顯示奧祕
- SAP UI5 裡的 Busy Indicator 控制元件使用概述UIIndicator控制元件
- SAP UI5 檢視裡的 OverflowToolbar 控制元件UI控制元件
- SAP UI5 裝置型別檢測 Device API 的工作原理UI型別devAPI
- SAP UI5 Library Resource Bundle 的設計原理UI
- SAP UI5 應用 index.html 裡定義的 data-sap-ui-theme 值的載入原理UIIndexHTML
- SAP UI5 應用的 OData 後設資料請求響應的解析原理分析UI
- 關於 SAP UI5 裝置型別檢測的實現原理UI型別
- SAP UI5 裡的 Busy Dialog 控制元件使用概述UI控制元件
- 如何檢測SAP UI5應用裡控制元件的初始化和析構時間點UI控制元件
- SAP UI5 應用的 OData 後設資料請求的傳送原理分析UI
- SAP UI5 應用開發教程之四十五 - 如何在 SAP UI5 應用裡使用 jQuery 和原生的 DOM APIUIjQueryAPI
- SAP UI5 應用 FlexBox 控制元件 growFactor 的使用方法UIFlex控制元件
- 將SAP UI5應用部署在Heroku雲平臺裡UI
- 在 SAP BAS 裡使用 SAP UI5 應用消費 OData 的 Create 和 Delete 操作UIdelete
- SAP Cloud for Customer的Container應用設計原理CloudAI
- SAP UI5 應用開發教程之五十三 - 如何自定義 SAP UI5 資料型別(Data Type) 試讀版UI資料型別
- SAP UI5 應用開發教程之五十六 - SAP UI5 樹控制元件(tree)的開發試讀版UI控制元件
- SAP UI5 應用開發教程之五十九 - 如何在 SAP UI5 應用裡顯示世界地圖試讀版UI地圖
- 如何把SAP UI5應用部署到SAP雲平臺的Fiori Launchpad裡去UI
- SAP UI5 按鈕的型別和背景色設定例子UI型別
- SAP UI5 應用基於裝置型別的頁面適配功能(Device Adaptation)UI型別devAPT
- SAP作業型別應用簡介型別
- SAP作業型別應用介紹型別
- 如何在SAP UI5應用裡新增使用攝像頭拍照的功能UI
- SAP UI5 應用開發教程之六十一 - 在 SAP UI5 應用裡繪製甘特圖 Gantt Chart 試讀版UI
- SAP UI5 應用開發教程之三十二 - 如何建立一個自定義 SAP UI5 控制元件UI控制元件
- SAP UI5 sap.ui.layout.Grid 控制元件寬度百分比的設定原理UI控制元件
- 把 SAP UI5 應用部署到 SAP KymaUI