Skip to Content

How to get UTC date from bound datepicker and format it

Oct 12, 2016 at 09:16 PM


avatar image
Former Member


I am developing a Fiori app which uses a date picker, and I am having troubles getting the correct date to display and format that date. The desired format is YYYY/MM/DD.

*displayFormat property of date picker only works on newly selected dates from the date picker, not bound values coming from the backend*

The date saved in the backend is "Aug 1 2016". When it reaches my formatting function, it is "Sun Jul 31 2016 18:00:00 GMT-0600 (Mountain Daylight Time)", I understand it is 6 hours behind the actual date due to timezone offset. I can use date.toUTCString() to get the proper date, however I want to avoid parsing a string to format it the way I want. I thought that using .getUTCMonth() and .getUTCDate() and other getUTC functions would allow me to work with the same date and format it the way I want, however the month returned in getUTCMonth() is different than the month in toUTCString(), and I don't know why!

See screenshot of my debugger below for visual explanation:

The desired date should be "2016/8/1" in this case, which is correct in toUTCString, but when trying to format it using UTC methods, I get a different date, and non UTC methods return an even "more wrong" date.

Thank you for reading this, any information you can provide is greatly appreciated.


dateformat.png (25.1 kB)
10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

2 Answers

Best Answer
Akhilesh Upadhyay Oct 13, 2016 at 07:01 AM

I think you can use below code in your xml view, no need to use formatter function and this will handle timezone diff and all.

<DatePicker value="{path: 'fromDate', type: 'sap.ui.model.type.Date', formatOptions: {pattern: 'yyyy/MM/dd', strictParsing: true , UTC: true}}">

Hope will be helpful.



10 |10000 characters needed characters left characters exceeded
Jakob Marius Kjær Oct 13, 2016 at 12:35 AM

In your XML view you should be able to use the following in the datepicker tag

displayFormat="YYYY/MM/DD" valueFormat="YYYY/MM/DD"

That should work. Otherwise try using a formatter.

Show 1 Share
10 |10000 characters needed characters left characters exceeded

You can also check additionaly information how to use 'sap.ui.core.format.DateFormat' use