SAP UI5的控制元件DatePicker的DateFormat屬性詳解

i042416發表於2020-09-09

This blog contains my research about the date format determination for DatePicker control.


SAP UI5的控制元件DatePicker的DateFormat屬性詳解


Suppose I have select a new date ( 2015-10-15 ) from DatePicker control, my aim is to figure out the logic how the line 192 has translated dateTapped, “Thu Oct 15 2015” to tempString, “15.10 2015”.


SAP UI5的控制元件DatePicker的DateFormat屬性詳解


aFormatArray

When I debug into this method, I find an array this.aFormatArray.


SAP UI5的控制元件DatePicker的DateFormat屬性詳解


It contains the date format placeholder as below: “day.month.year”. This is the reason why I get 15.10.2015 as conversion result.


SAP UI5的控制元件DatePicker的DateFormat屬性詳解


So the question now is, when, where and how is this.aFormatArray populated? Do a text search and I find out it is determined by variable this.oFormatOptions.pattern. In my laptop it has value “dd.MM.yyyy”. Where does this pattern come from?

this.oFormatOptions.pattern


SAP UI5的控制元件DatePicker的DateFormat屬性詳解


Through debugging we can know the pattern is determined by these three factors:


SAP UI5的控制元件DatePicker的DateFormat屬性詳解


The pattern is stored in this.mCustomData in LocaleData.js:


SAP UI5的控制元件DatePicker的DateFormat屬性詳解


this.mCustomData

And this.mCustomData is filled in LocalData.js ‘ constructor function:


SAP UI5的控制元件DatePicker的DateFormat屬性詳解


getCustomLocaleData function just simply returns mSettings in Configuration.js:


SAP UI5的控制元件DatePicker的DateFormat屬性詳解


mSettings

Now I will look into when the data in this.mSettings will be populated. I find an array M_ABAP_DATE_FORMAT_PATTERN which contains lots of date format options. For my current testing, the format option with key sFormatId = 1 is chosen. Why “1”?


SAP UI5的控制元件DatePicker的DateFormat屬性詳解 SAP UI5的控制元件DatePicker的DateFormat屬性詳解


This “1” is configured in my user settings for corresponding ABAP backend system and retrieved via an OData request:


SAP UI5的控制元件DatePicker的DateFormat屬性詳解 SAP UI5的控制元件DatePicker的DateFormat屬性詳解 SAP UI5的控制元件DatePicker的DateFormat屬性詳解


Now we are ready to go back for checking how is aFormatArray filled by the Date Format DD.MM.YYYY. The logic is, to simply replace each character in this.oFormatOptions.pattern with corresponding hard code value in DateFormat.prototype.oStates:


SAP UI5的控制元件DatePicker的DateFormat屬性詳解


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

SAP UI5的控制元件DatePicker的DateFormat屬性詳解


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

相關文章