When consuming Gateway services in JavaScript the task of working with dates and times is made even harder because of the different representations the objects take. In this blog I will highlight how Gateway OData dates and times are represented in both JSON and JavaScript and show by example how to use these values in SAPUI5 with the JavaScript Date Object and the Class sap.ui.core.format.DateFormat.
TLDR: You can use sap.ui.core.format.DateFormat to format and parse date and time objects when working with Gateway services, see http://jsbin.com/irewuq/9/edit for an example.
Below is the formatted JSON representation of Gateway Entity, similar to what you get using the Flight Service in the Demo Gateway system. eg http://gw.esworkplace.sap.com/sap/opu/odata/IWBEP/RMTSAMPLEFLIGHT_2/FlightCollection?$format=json
"FlightConnectionID": "0017",
"FlightDate": "/Date(1354665600000)/",
"FlightDetails": {
"ArrivalInDays": 0,
"ArrivalTime": "PT14H01M00S",
"DepartureAirPort": "JFK",
"DepartureCity": "new york",
"DepartureCountryCode": "US",
"DepartureTime": "PT11H00M00S",
"DestinationAirPort": "SFO",
"DestinationCity": "SAN FRANCISCO",
"DestinationCountryCode": "US",
"Distance": "2572.0000",
"DistanceUnit": "SMI",
"FlightTime": 361,
"FlightType": "",
"__metadata": {
"type": "RMTSAMPLEFLIGHT_2.FlightDetails"
}Highlighted below are Date and Time passed in this service
"FlightDate": "/Date(1354665600000)/", - JSON Date Object
"DepartureTime": "PT11H00M00S", - XSD DurationFlightDate is represented as a JSON Date object, the value is the date in milliseconds since Unix Epoch.
Unix EPOCH time = Date(0) = Thu Jan 01 1970 00:00:00 GMT, this value is handy to know if your going to work with dates. http://en.wikipedia.org/wiki/Unix_time
DepartureTime is represented as an XSD:Duration Date Type
The letters in PT11H00M00 - P: Period, T: Time, H: Hours, M: Minutes see http://www.w3schools.com/schema/schema_dtypes_date.asp
Luckily if you use the ODataModel, datajs the OData library SAPUI5 uses has regular expressions and code logic which parses these values into JavaScript for us. Below is how this Entity looks parsed to JavaScript.
ODataModel values highlighted
FlightDate : Wed Dec 05 2012 11:00:00 GMT+1100 (AUS Eastern Daylight Time)
DepartureTime : { __edmtype: "Edm.Time", ms: 39600000} FlightDate looks like a string, it is in fact the string representation of a JavaScript Date Object
The JavaScript Date Object supports the following ways for instantiating a date, if you are in the AEDT timezone then the following values will be equal.
var a = new Date('Wed Dec 05 2012 11:00:00 GMT+1100 (AUS Eastern Daylight Time)');
var b = new Date(1354665600000);
var c = new Date('2012/12/05');
a.getTime()===b.getTime()&& a.getTime()===c.getTime()date.getTime() returns the number of milliseconds since Epoch.
Important to note is the Timezone offset when comparing dates, was +1100 AEDT in December, today its +1000 due to daylight savings.
new Date( ) = Sun Apr 28 2013 14:05:52 GMT+1000 (AUS Eastern Standard Time)To get a consistent Timezone offset use the one from Epoch
var TimezoneOffset = new Date(0).getTimezoneOffset(); // -660 minutesDepartureTime is a millisecond value wrapped in a edmtype object.
39600000/3600000 = 11 hours 00 min // 3600000 is the number of milliseconds in an hour 60 minutes *60 seconds *1000 milliseconds
We can use the value in a javascript date object and it will give us the time since Epoch
new Date(39600000).toUTCString() = Thu, 01 Jan 1970 11:00:00 GMT
new Date(39600000).getUTCHours() = 11SAPUI5 provides the Class sap.ui.core.format.DateFormat that can be used with JavaScript Date Objects for formatting and parsing dates and times.
The example i'll give is formatting dates and times to formats you may want to use in a mobile application. eg
There is not much to it if you handle everything in UTC milliseconds, to do this we add the timezone offset when formatting and remove it when parsing.
// SAPUI5 formatters
var dateFormat = sap.ui.core.format.DateFormat.getDateInstance({pattern : "dd/MM/yyyy" });
var timeFormat = sap.ui.core.format.DateFormat.getTimeInstance({pattern: "KK:mm:ss a"});
// timezoneOffset is in hours convert to milliseconds
var TZOffsetMs = new Date(0).getTimezoneOffset()*60*1000;
// format date and time to strings offsetting to GMT
var dateStr = dateFormat.format(new Date(FlightDate.getTime() + TZOffsetMs)); //05-12-2012
var timeStr = timeFormat.format(new Date(DepartureTime.ms + TZOffsetMs)); //11:00 AM
//parse back the strings into date object back to Time Zone
var parsedDate = new Date(dateFormat.parse(dateStr).getTime() - TZOffsetMs); //1354665600000
var parsedTime = new Date(timeFormat.parse(timeStr).getTime() - TZOffsetMs); //39600000*Note to SAPUI5 developers DateFormat.format has a to UTC flag, DateFormat.parse could use a from UTC flag.
The following is a list of the pattern elements in the DateFormat class, use them to derive the date and time formats you need.
/**
* Pattern elements
*/
sap.ui.core.format.DateFormat.prototype.oStates = {
"G": "era",
"y": "year",
"Y": "weekYear",
"M": "month",
"w": "weekInYear",
"W": "weekInMonth",
"D": "dayInYear",
"d": "day",
"F": "dayOfWeekInMonth",
"E": "dayNameInWeek",
"u": "dayNumberOfWeek",
"a": "amPmMarker",
"H": "hour0_23",
"k": "hour1_24",
"K": "hour0_11",
"h": "hour1_12",
"m": "minute",
"s": "second",
"S": "millisecond",
"z": "timezoneGeneral",
"Z": "timezoneRFC822",
"X": "timezoneISO8601"
};I have shown you the JSON and JavaScript representations Gateway services have for date and time, given an overview of how to use some of the functions of the JavaScript Date Object, shown an example of how I use the sap.ui.core.format.DateFormat Class to format values for a mobile application which integrates with Gateway services. All that's left is to share working code http://jsbin.com/irewuq/9/edit.
- SAP Managed Tags:
31 Comments
