SAP UI5應用裡型別為Edm.DateTime的日期控制元件設計原理

注销發表於2020-09-07

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.


SAP UI5應用裡型別為Edm.DateTime的日期控制元件設計原理


It is bound to json model field “ClosingDate” with a formatter.


SAP UI5應用裡型別為Edm.DateTime的日期控制元件設計原理


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


SAP UI5應用裡型別為Edm.DateTime的日期控制元件設計原理


After I change the closingDate to 2015-10-3 and save the change:


SAP UI5應用裡型別為Edm.DateTime的日期控制元件設計原理


The saved opportunity is reread from backend with an odata request. In Chrome network tab I observed the closingDate has this format: /Date(1443830400000)/:


SAP UI5應用裡型別為Edm.DateTime的日期控制元件設計原理


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:


SAP UI5應用裡型別為Edm.DateTime的日期控制元件設計原理


And this is response from gateway client.


SAP UI5應用裡型別為Edm.DateTime的日期控制元件設計原理


Why is there difference between them? And when I type “alert(new Date(1443830400000));” in chrome console, I get this popup:


SAP UI5應用裡型別為Edm.DateTime的日期控制元件設計原理


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:


SAP UI5應用裡型別為Edm.DateTime的日期控制元件設計原理


check the body field:


SAP UI5應用裡型別為Edm.DateTime的日期控制元件設計原理


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.


SAP UI5應用裡型別為Edm.DateTime的日期控制元件設計原理


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.


SAP UI5應用裡型別為Edm.DateTime的日期控制元件設計原理


Then the local time returned by framework will be passed into my formatter so now I could do any formatting based on customer requirement:


SAP UI5應用裡型別為Edm.DateTime的日期控制元件設計原理


要獲取更多Jerry的原創文章,請關注公眾號"汪子熙":

SAP UI5應用裡型別為Edm.DateTime的日期控制元件設計原理


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/24475491/viewspace-2717876/,如需轉載,請註明出處,否則將追究法律責任。

相關文章