SAPUI5: How to Format an OData Service Date-Time Value?

🏷️

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_date_time_screenshot
[SAP]

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:

  1. Predefined patterns
  2. Custom patterns
  3. 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.

🙌 More Articles

🔥 The Complete SAP ERP Modules Overview Infographic in PDF Format (Free)

Plus, don't miss future infographics and free SAP tips and insights that are available only to newsletter subscribers. 

Leave a Comment

Your email address will not be published. Required fields are marked *

Fill out this field
Fill out this field
Please enter a valid email address.
You need to agree with the terms to proceed

Menu