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.

🔥 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. 

📚 More Articles

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

altwork_picture_2

The Altwork Station redefines how people interact with their computers by allowing the computer screen and keyboard to physically conform to support the user’s body while working long hours on a computer.

Submission received, thank you!

Close Window