Handling edm.DateTime in different time zone in UI5 application

[Jagtar]

Handling edm.DateTime in different time zone in UI5 application

Introduction:

This blog will help reader to get rid of problem to work with datetime in ui5 . In SAP odata there is property for date is edm.datetime which return date time both in single property but when user bind this property to view and do operation by story locally in client model like comparison addition subtraction or any other operation then datetime property will not work as expected . In different time zone behave differently to handle this situation i have written below below solution.

When i face problem i found lots of blog which help and work fine when it come to display only but not found proper blog which help and guide when requirement is to display from direct odata model and to store in client model and do some operation and then display.  how play with datetime in local model(JSON Model) to handle different time zone .

Below are few blogs that gives solution for showing date in ui5 and passing date to backend with modifying original date but my blog gives you generic solution which work for all scenario

• Display in view


• Perform operation in controller


• Pass datetime back to backend


• Perform all arithmetic operation this single solution work for all cases

Below All problem are addressed with single generic solution

These blogs are already available and provides lot of approach to some user i provided my solution and marked as best answer that help them to fix there problem .So i decided to white blog provide single generic solution to all date time related problems.

 

Sapui5 date one day missing

https://answers.sap.com/questions/13302516/sapui5-date-one-day-missing.html

 

Date value is getting reduced by one day while passing it from UI5 application to Gateway system

https://answers.sap.com/questions/323063/date-value-is-getting-reduced-by-one-day-while-pas.html

 

SAP WebIDE - UI5 - Date field is not showing correct date

https://answers.sap.com/questions/409976/sap-webide---ui5---date-field-is-not-showing-corre.html

 

Use below solution to show date time on any control

Solution available to handle datetime in View

View binding and binding from controller with property direct from odata model

Use   sap.ui.model.type.Date with format option UTC:true

 

Binding in view

<Text text="{path: 'Date', type: 'sap.ui.model.type.Date', formatOptions: {style: 'medium', strictParsing: true , UTC: true}}"/>

 Binding from controller

{ path: 'ChangeDateTime', type: 'sap.ui.model.type.DateTime', formatOptions: {UTC:true} }

Problem with dateTime in controller handling

When datetime is stored in local model required to modify in controller then date is changing by time zone . if application is opening  in -time like (UTC−07:00) it reduced the date by one day . which create issue in comparison or other operation.

 

Why This issue Occurs

When datetime value you see in your local browser it changed to your local time zone irrespective of time received from backend

 

Below are step to replicate this at your system. It behave in different time zone as below

UTC+05:30

System time zone setting

Data Coming from backend as below screen shot

Same value in negative time zone UTC -08:00

Date is reduced by one day

 

Sometime DateTime property received from backend with UTC 0 time zone and it is saved in local model if time zone in negative for user then date is changed by one day and same for + positive time zone it increase date by one day .

Eg if user is in UTC+05:30 it add 5:30 in time.every time value assigned to another or any other operation.

 

Solution For handling datetime from client model 

When data is received from backend before assigning to local modal' property use below formatter and then assign to local model's property.

Set date on local json model from odata model response

var oOriginalDate = new Date(formatter.setLocalTimeZoneZone(formatter.getOriginalDateTime(new Date(backendDate))));



this.getModel("oLocalJSONModel").setProperty("/Date", oOriginalDate );

VIew binding with json model then do as below

{path: 'oLocalJSONModel>/Date', type: 'sap.ui.model.type.Date'}"

 

_setLocalTimeZoneZone: function (datevalue) {

			if (datevalue!== undefined && datevalue!== null && datevalue!== "") {

				datevalue= new Date(datevalue);

				var offSet = datevalue.getTimezoneOffset();

				var offSetVal = datevalue.getTimezoneOffset() / 60;

				var h = Math.floor(Math.abs(offSetVal));

				var m = Math.floor((Math.abs(offSetVal) * 60) % 60);

				datevalue= new Date(datevalue.setHours(h, m, 0, 0));

				return datevalue;

			}

			return null;

		},



getOriginalDateTime: function (dateTime) {

			if (dateTime!== undefined && dateTime!== null && dateTime!== "") {

				var dateFormat= DateFormat.getInstance({

					UTC: true,

					pattern: "MM/dd/yyyy"

				});

				var originalDate = dateFormat.format(new Date(dateTime));

				return originalDate ;

			}

			return null;

		},

 

Conclusion:

So in this blog below all scenario are covered and above just two method are enough to handle all time zone there is no change in code for negative or positive time zone .This solution is well tested for all over the world in all different time zone from UTC -12 International date line west to UTC +14 Kiritimati Island.

For view binding from direct odata model for any control just single line of code.

<Text text="{path: 'Date', type: 'sap.ui.model.type.Date', formatOptions: {style: 'medium', strictParsing: true , UTC: true}}"/>

and For controller fetch date from backend and set to client model 

var oOriginalDate = new Date(formatter.setLocalTimeZoneZone(formatter.getOriginalDateTime(new Date(backendDate))));

Bind on view from Json Model

{path: 'oLocalJSONModel>/Date', type: 'sap.ui.model.type.Date'}

Now use oOriginalDate to assing further or any other operation calculation , comparision, arithmetic operation( +, - ...etc) use below line 

formatter.setLocalTimeZoneZone(DateFromJsonModel);

 

Please let me know in comments your suggestion , question or any doubt .