Date formatting not working properly

[arjun_thakur]

Hi Experts,

I am working on a custom SAPUI5 app where I need to display data in a table. I am using sap.ui.table to display the data. In the table, one of the column is a data field and to display the data for that field, I am formatting the data to display in the required format. I am using following code to format the date:

for (var index = 0; index < aHistoryData.length; index++) {
aHistoryData[index].Matter_Open_Date = sap.ui.core.format.DateFormat.getDateTimeInstance({
					pattern: "MM/dd/YYYY",
					UTC: true
				}).format(new Date(aHistoryData[index].Matter_Open_Date));
}

Using this code, I am facing a peculiar issue: the oData service is returning the date equivalent to 12/26/2020 but when it get formatted and gets rendered on screen, the year gets incremented by 1 i.e. the date gets displayed as 12/26/2021. I am not sure how that is happening.

Can anyone suggest how to resolve this issue.

Regards,

Arjun

[boghyon]

Is the OData property, containing the date value, of type "Edm.DateTime"? Or is it in "Edm.String"?

[arjun_thakur]

Hi Boghyon,

it is Edm.DateTime.

[boghyon]

I updated my answer below. Please try to avoid hardcoding the pattern.

[boghyon · Accepted solution]

Replace `YYYY` with `yyyy`.

The symbol `YYYY` should be used only if the intention is to represent calendar week years according to Unicode's Date Symbol Specification.

> Y == Year in “Week of Year” based calendars in which the year transition occurs on a week boundary.

___

See also https://answers.sap.com/answers/13233448/view.html for other samples

___

Update: Since the OData property type is "Edm.DateTime", I strongly recommend to avoid hardcoded pattern in the first place. Instead, display a locale dependent default pattern. If the date needs to be displayed in a short format, use `style: 'short'` (or 'medium') in the formatOptions together with `displayFormat: 'Date'` in the constraints.

<ControlXYZ controlProperty="{
  path: 'MyDate',
  type: 'sap.ui.model.odata.type.DateTime',
  formatOptions: {
    style: 'short' // other available options are 'medium', 'long', and 'full'.
    // See API ref of sap.ui.core.format.DateFormat.getDateInstance for more format options.
  },
  constraints: {
    displayFormat: 'Date'
  }
}" />

Let the users see the date in their preferred locale / language. Do not hardcode the pattern!