UI5
No Comments

How to Format a Date-Time Value from an OData Service in SAP UI5?

Close-up of a calendar.

A date-time value (Edm.DateTime) in 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 such an OData date-time value 2019-07-03T12:34:56 from an OData service via an OData model to an SAP UI5 control then the control’s output is like the following:

Wed Jul 03 2019 12:34:56 GMT+0200 (Central European Summer Time).

What if you want to format the control’s output other than the default format? The SAP UI5 framework has made that easy for you.

SAP UI5 Controls Format OData Service Date-Time Values by Default

An SAP UI5 control formats by default an Edm.DateTime OData service value to the format <day written out> <month written out> <day> <year> <hours>:<minutes>:<seconds> <timezone> <timezone written out>.

Therefore, an SAP UI5 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).

For example, an OData date-time value bonded to an SAP UI5 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 XML view counterpart in a controller in JavaScript:

// in your controller

...

// OData service's DateTimeValue contains:
// 2019-07-03T12:34:56

var oText = new sap.m.Text({

  text: "{oDataServiceModel>/DateTimeValue}"

});

// 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 Date-Time Value to other Custom Formats

To format an OData date-time value to another format than the default SAP UI5 control date format is pretty simple and straightforward. The SAP UI5 framework does a great job concerning date formatting.

You can easily format an OData date-time value to any custom date, time, or date-time format. The date-time value formatting mainly is an interplay between the classes sap.ui.model.odata.type.DateTime and sap.ui.core.format.DateFormat.

The sap.ui.core.format.DateFormat has many different options to format a date-time value.

  • predefined patterns
  • custom patterns
  • patterns that are relative to the present moment
  • interval patterns

Therefore, you do not need any custom self-written formatter to format a date-time value – the SAP UI5 framework does the work for you.

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 is how you 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.Date',
  formatOptions: { 
    style: 'short' 
  } 

}"/>

<!-- text output is: --> 
<!-- 7/3/19, 12:34 PM -->

...

Or the XML view counterpart in a controller in JavaScript:

// 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' 
 
      } 

    });
 
  }"

});

// place the oText into the controller's XML view

// text output is:
// 7/3/19, 12:34 PM

...

Custom Patterns

Predefined patterns for date-time values are, for example:

  • 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)

See the official documentation for the date-time pattern options.

Here is how you 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 controller in JavaScript:

// 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' 
 
      }     
    
    });

  }"

});

// place the oText into the controller's XML view

// text output is:
// 2019 July 03 - 12:34 PM

...

Patterns That Are Relative to the Present Moment

Furthermore, the SAP UI5 framework provides you with an option to get the time between the date-time value and the present moment.

Relative times are, for example

  • today
  • 3 days ago
  • 1 year ago

Plus, you can choose with the property relativeStyle the length of the relative formatting. You can choose between three options:

  • narrow (1 yr. ago)
  • short (1 yr. ago)
  • wide (1 year ago)

Here is how you use a date pattern that is relative to the present moment in an XML view:

<!-- 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 controller in JavaScript:

// 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'
 
      }     
    
    });

  }"

});

// 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 in a date pattern that is relative to the present moment.

There are some more options to format a date-time value in SAP UI5, such as:

  • intervals
  • set the time zone to UTC

See the official SAP UI5 documentation of the class sap.ui.core.format.DateFormat for more options to format a date-time value.

Most Recent Articles

Will SAP UI5 replace the SAP Web UI?

SAP Full Forms

More Similar Articles

Leave a Reply

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.

Menu