/ timezone

Dealing with timezones in SAPUI5

One common challenge I often see being discussed in UI5 message board is handling date pickers across different timezones. A commonly experienced issue is that the date displayed is one day behind the date loaded from your oData service. A possible reason for this is that there is a difference in the timezones of your oData service in the backend, and your client running the UI5 application. For example, if the datetime coming from the oData service is defined as midnight in UTC, every timezone behind UTC will display that datetime as one day earlier.

In order to resolve this issue, I have seen lots of developers manipulate the date objects manually in the controller in order to fix the display:

var d = oData.myDateProperty;
d.setMinutes( d.getMinutes() + d.getTimezoneOffset() );

// 'd' will now display the correct date
console.log(d);

The issue with this is that if this manipulated value is now saved back to the backend, the date will actually be one day ahead in UTC. Instead of changing the actual date value, I would suggest to use the standard date formatter to display the date in a standard timezone (as defined on the backend, commonly UTC).

For example, we can force the date to be both picked and displayed in UTC like so:

<DatePicker id="myTimePicker" placeholder="Enter Date ..." 
    value="{
        path:'/dateValue', type:'sap.ui.model.type.Date', formatOptions: {
            style: 'medium', strictParsing: true, UTC: true
        }
    }"
    />

This will guarantee that date values are consistent across clients in different timezones.

Then when displaying the date in a text field:

<Text text="{
    path:'/dateValue', type:'sap.ui.model.type.Date', 
    formatOptions: { 
        style: 'long', UTC: true}
    }"/>
Dealing with timezones in SAPUI5
Share this