This is about how to format an OData service date-time value in SAPUI5.
You’ll learn:
- How to format an OData service date-time value in an XML view
- How to format an OData service date-time value in a controller
- Lots more
So if you want to understand once and for all how to format those OData date-time values, then this article is for you.
Keep reading!
OData Service Date-Time Value in SAPUI5
A date-time value from an OData service looks in raw something like that:
<d:OrderDate m:type=”Edm.DateTime”>2019-07-03T12:34:56</d:OrderDate>.
If you bind a date-time value 2019-07-03T12:34:56 from an OData service to an SAPUI5 control, the control’s output is like this:
Wed Jul 03 2019 12:34:56 GMT+0200 (Central European Summer Time)
But what if you wanted to format the control’s output differently?
SAPUI5 framework makes that easy for you (Yay!):
SAPUI5 Controls Format OData Service Date-Time Values by Default
The default format for an Edm.DateTime OData service value in an SAPUI5 control is:
<day written out> <month written out> <day> <year> <hours>:<minutes>:<seconds> <timezone> <timezone written out>
Whether you want it or not.
Therefore, an SAPUI5 control formats behind the scenes the raw OData date-time value 2019-07-03T12:34:56 to Wed Jul 03 2019 12:34:56 GMT+0200 (Central European Summer Time).
An OData date-time value in an SAPUI5 text control in an XML view:
<!-- in your XML view -->
...
<!-- OData service's DateTimeValue contains: -->
<!-- 2019-07-03T12:34:56 -->
<Text text="{oDataServiceModel>/DateTimeValue}" />
<!-- text output is: -->
<!-- Wed Jul 03 2019 12:34:56 GMT+0200 (Central European Summer Time) -->
...Or the JavaScript controller equivalent:
// in your controller
...
// OData service's DateTimeValue contains:
// 2019-07-03T12:34:56
var oText = new sap.m.Text({
text: "{oDataServiceModel>/DateTimeValue}"
});
// next, place the oText into the controller's XML view
// text output is:
// Wed Jul 03 2019 12:34:56 GMT+0200 (Central European Summer Time)
...Format an OData Service Date-Time Value to other Formats than the Default
To format an OData service date-time value into another format than the SAPUI5 control date-time format is easy.
Date formatting is super easy with SAPUI5.
You can format an OData date-time value to any custom date, time, or date-time format.
The date-time value formatting uses an interplay between sap.ui.model.odata.type.DateTime and sap.ui.core.format.DateFormat—find out how it does below.
Sap.ui.core.DateFormat has many options to format a date-time value:
- Predefined patterns
- Custom patterns
- Patterns that are relative to the present moment
Therefore, you don’t have to write a custom formatter to format a date and time-value—the SAPUI5 framework does it for you. Further, any self-written formatter would violate any idea of SAPUI5 best practices.
#1 Predefined Patterns
The predefined patterns for date-time values are:
- Short (7/3/19, 12:34 PM)
- Medium (Jul 3, 2019, 12:34:56 PM)
- Long (July 3, 2019 at 12:34:56 PM GMT+02:00 )
Here’s how to use a predefined date pattern in an XML view—for example, the short pattern:
<!-- in your XML view -->
...
<!-- OData service's DateTimeValue contains: -->
<!-- 2019-07-03T12:34:56 -->
<Text text="{
path: 'oDataServiceModel>/DateTimeValue',
type: 'sap.ui.model.type.DateTime',
formatOptions: {
style: 'short'
}
}"/>
<!-- text output is: -->
<!-- 7/3/19, 12:34 PM -->
...Or the JavaScript controller counterpart to the XML view:
// in your controller
...
// OData service's DateTimeValue contains:
// 2019-07-03T12:34:56
var oText = new sap.m.Text({
text: "{
path: 'oDataServiceModel>/DateTimeValue'
type: new sap.ui.model.type.DateTime({
formatOptions: {
style: 'short'
}
});
}"
});
// next, place the oText into the controller's XML view
// text output is:
// 7/3/19, 12:34 PM
...#2 Custom Patterns
Examples of custom patterns for date-time values include:
- HH:mm (12:34)
- yyyy.MM.dd HH-mm-ss (2019.07.03 12-34-56)
- yyyy-MM-dd’T’HH:mm:ss (2019-07-03T12:34:46)
You can find all date-time pattern options in the official documentation.
Here’s how to use a custom date pattern in an XML view:
<!-- in your XML view -->
...
<!-- OData service's DateTimeValue contains: -->
<!-- 2019-07-03T12:34:56 -->
<Text text="{
path: 'oDataServiceModel>/DateTimeValue',
type: 'sap.ui.model.type.DateTime',
formatOptions: {
pattern: 'yyyy MMMM dd - hh:mm aaa'
}
}"/>
<!-- text output is: -->
<!-- 2019 July 03 - 12:34 PM -->
...Or the XML view counterpart in a JavaScript controller:
// in your controller
...
// OData service's DateTimeValue contains:
// 2019-07-03T12:34:56
var oText = new sap.m.Text({
text: "{
path: 'oDataServiceModel>/DateTimeValue'
type: new sap.ui.model.type.DateTime({
formatOptions: {
pattern: 'yyyy MMMM dd - hh:mm aaa'
}
});
}"
});
// next, place the oText into the controller's XML view
// text output is:
// 2019 July 03 - 12:34 PM
...#3 Patterns That Are Relative to the Present Moment
Furthermore, SAPUI5 offers you a way to get the time between the date-time value and the present moment.
Relative times are, for instance:
- Today
- 3 days ago
- 1 year ago
Plus, you can choose the length of the relative formatting from the property relativeStyle.
You have three options:
- Narrow (e.g 1 yr. ago)
- Short (e.g. 1 yr. ago)
- Wide (e.g. 1 year ago)
This is how an XML view uses a date pattern relative to the current time:
<!-- in your XML view -->
...
<!-- OData service's DateTimeValue contains: -->
<!-- 2019-07-03T12:34:56 -->
<!-- present moment is 2019-07-03T13:24:56 -->
<Text text="{
path: 'oDataServiceModel>/DateTimeValue',
type: 'sap.ui.model.type.DateTime',
formatOptions: {
relative: true,
relativeScale: 'auto',
relativeStyle: 'wide'
}
}"/>
<!-- text output is: -->
<!-- today -->
...Or the XML view counterpart in a JavaScript controller:
// in your controller
...
// OData service's DateTimeValue contains:
// 2019-07-03T12:34:56
// present moment is 2019-07-03T13:24:56
var oText = new sap.m.Text({
text: "{
path: 'oDataServiceModel>/DateTimeValue'
type: new sap.ui.model.type.DateTime({
formatOptions: {
relative: true,
relativeScale: 'auto',
relativeStyle: 'wide'
}
});
}"
});
// next, place the oText into the controller's XML view
// text output is:
// today
...Now you know how to format a date-time value from an OData service into a predefined date pattern, a custom date pattern, or a date pattern relative to the present moment in an XML view or JavaScript controller.
Even more options exist to format a date-time value in SAPUI5, such as:
- Intervals
- Set the time zone to UTC
See the official SAPUI5 documentation of the class sap.ui.core.format.DateFormat for more specific options to format date-time values.