SAP ui5 date type sap ui. model. type. Analysis of the display format of date

I developed a SAP UI5 application , Data type used sap.ui.model.type.Date, And specify the display format pattern by ：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' } } }"/>

The value of the data source bound to this field is ：2015-04-01T01:20:59

I look forward to SAP UI5 The format displayed on the is One year - a certain month - One day -T- Hours - branch - second , But the final display effect is shown in the figure below ：April 1,2015

This article introduces how to analyze the problem of this display format .

In the previous article , We have ruled out that this problem is caused by data parsing errors , Because in DateFormat.js Of _format Method input parameters oJSDate, It has been possible to observe correctly from the local JSON The file parsed contains Hours , branch , second Time value of ：Thu Apr 02 2015 01:20:30 GMT+0800 (China Standard Time)

this.aFormatArray Only five records are included , Excluding hours , branch , second , Therefore, the last output time is only mm / DD / yyyy .

analysis aFormatArray Data source ：

this.aFormatArray = this.parseCldrDatePattern(this.oFormatOptions.pattern);

Run time debugging ：this.oFormatOptions.pattern The value of is MMddyyyy

We are xml Specified in the view pattern, Can be in callstack See in ：

XML View address , be located One suit SAP UI5 Step by step learning tutorials for developers Step No 34：

pattern: ‘yyyy-MM-ddTHH:mm:ss’

We xml The view only provides source-pattern, instead of pattern, therefore ,SAP UI5 frame , You need to call the following code to generate pattern：

oFormat.oFormatOptions.pattern = oInfo.getPattern(oFormat.oLocaleData, oFormat.oFormatOptions.style, oFormat.oFormatOptions.calendarType);

from SAP UI5 Generate Pattern To see , We xml Provided in the view pattern Not considered as an input parameter ：

getDatePattern: function(sStyle, sCalendarType) {
    
			assert(sStyle == "short" || sStyle == "medium" || sStyle == "long" || sStyle == "full", "sStyle must be short, medium, long or full");
			return this._get(getCLDRCalendarName(sCalendarType), "dateFormats", sStyle);
		},

style Support full, And what I specified was long.

If I set it to full, The display effect is as follows ：Thursday, April 2, 2015

more Jerry The original article of , All in ：“ Wang Zixi ”: