Technical Articles

June 5, 2019 1 minute read

UI5 SmartControls: How to use “Date” and “Time”-related Data Types

Why…?

It is quite important to sort out the right combination of OData (V2) Data Type / Annotations and SmartControl settings to match the targeted use case perfectly.

In date- and time-related issues it is not always obvious which combination fits the concrete use case best. Below you find a list to understand a bit when to use what.

Usage recommendation

(sorted descending to their importance/frequency of use):

For Dates

Example	“Dec. 12th, 2020”
OData Service Metadata	Edm.DateTime with sap:display-format="Date"
UI	The SmartControls show only the “date” part of the timestamp, independent of the local time zone (e.g. there is no shift of a date when looked at from two different machines in two different timezones). For input, a date picker is offered.
Real-world sample	Use this data type for all dates that are globally not shifted, e.g. birthdays (Mr. Gauß was born on Apr. 30th, 1777, independent if you speak about it in India or America).

For Time Stamps containing Date and Time

Example	“Dec. 12th, 2020, 19:22:39”
OData Service Metadata	Edm.DateTimeOffset
UI	The SmartControls show data and time in local user time zone. For input, a DateTime picker is offered.
Real-world sample	Use this data type for timestamps that should be shown in the users timezone, e.g. build timestamps, creation timestamps (a car production was completed at Dec. 12th, 10:21:32 GMT) or the beginning of a virtual meeting (here, every user wants to see “her” specific start timestamp).

For Time Stamps containing Date and Time, displayed in their local representation

Example	“Jun. 3rd, 2019, 10:00:00”
OData Service Metadata	Edm.DateTime
UI	Currently not well supported by the SAPUI5 SmartControls. A work around could be to use a combination of two fields, one typed as Edm.DateTime with sap:display-format=”Date” and one typed as Edm.Time.
Real-world sample	Use this data type to present a timestamp in its “local” representation and not recalculated to the user’s timezone, e.g. for arrival of a plain on a certain airport (where the user wants to see the local date/time, not recalculated to her current time zone).

For Times

Example	“19:33:49”
OData Service Metadata	Edm.Time
UI	The SmartControls show the time as given by the service. For input, a time picker is offered.
Real-world sample	Use this data type to express a certain time on a fixed date or on no specific date, e.g. start and end times for sessions on a onsite event.

Conclusion

With the above mentioned hints it might got clearer which data type needs to be taken in the OData service. But there is even more! For further details and hints about how the functions and features of the UI5 Smart Controls can be leveraged and wich specific OData features are supported, please see also the “Smart Controls” area in the UI5 documentation and the respective API reference pages of the controls (SmartField, SmartFilterBar, SmartTable, SmartChart).

17 Comments

You must be Logged on to comment or reply to a post.

Aashima Arya

December 18, 2019 at 1:33 pm

Dear Alexandar,

Thank you for sharing this.

Is there any way i can set time with zone?

lets suppose time format is long and if i want to edit the time - it should allow me to select time and zone both.

Thank you,

Aashima

Alexander Schmalzhaf

Blog Post Author

November 11, 2020 at 3:36 pm

Hello Ashima,

although this question is about a year old let me shortly answer:

The only possibility to maintain both, (date)time AND timezone, is by modeling these two fields explicitly in the data model.

So when you really need the possibility to maintain a timezone, you should introduce a property for it. Only with that, you also could think of providing a valuelist for the property listing all availbale timezones.

Best regards

Alexander

Aashima Arya

November 12, 2020 at 6:31 am

Thank you 🙂

Frank Müller

November 11, 2020 at 3:23 pm

Dear Alexandar,

Thank you very much for sharing this.

Do you know if it is planned, that the smart controls will support Edm.DateTime for timestamps correctly?

Best regards

Frank

Alexander Schmalzhaf

Blog Post Author

November 11, 2020 at 3:34 pm

Hello Frank,

according to my knowledge there are currently no discussions to change the support for Edm.DateTime.

However, there have been discussions to enhance the Edm.DateTimeOffset handling:

DateTimeOffset is used for date and time - where these are currently recalculated to the local timezone. The point of discussion has been to enable a second "mode": Display a DateTimeOffset timestamp in the timezone given.

That might also fulfill your requirement.

Unfortunately I cannot say how the discussions went on and if and when it will make it to the product...

BR
Alex

Frank Müller

November 11, 2020 at 4:18 pm

Hi Alex,

thank you very much for your reply.

That is interesting.

I'm wondering how I can show / filter timestamps in UTC in a Firoi Elements App without splitting it into 2 fields.

Is there any Annotation available / planned for it?

Best regards

Frank

Michael Wilk

January 10, 2022 at 10:31 am

We would like to display a timestampe (Type Edm.DateTime) coming from a odata service within our sapui5 app without conversion to the local (user) timezone.

Is there a way to specify this via local annotations? Like it is possible within a view:

value="{path: 'detailView>/fromDate', type: 'sap.ui.model.type.DateTime', formatOptions: { pattern: 'dd.MM.YYYY HH:mm', UTC: true }}"

with the UTC: true parameter?

Vladimir Velinov

January 12, 2022 at 1:46 pm

Could you specify that control do you use? Is it smart field?

Most of the cases EDM.DateTime is used to display dates due to the lack of EDM.Date type like the one in OData V4. This is done in combination with annotation display-format=Date or constraint displayFormat: "Date". Also you have to use the proper OData type, which is sap.ui.model.odata.type.DateTime

You have to bear in mind that EDM.DateTime type doesn't carry timezone information. Check the OData V2 date types here.

So only local and UTC are possible, no arbitrary timezone. About your case you could try (assuming the control is smart field) this snippet, very similar to what you've stated above. Just using proper type

<smartField:SmartField value="{
   path: 'PathToDateTime',
   type: 'sap.ui.model.odata.type.DateTime',
   formatOptions: {
	 'UTC': true,
	 style: 'medium' <!-- or use pattern -->
   }
}">

Currently we're working on a solution that would use annotation to instruct the UI to switch between local and UTC for the Smart controls, like Smart field, Smart filterbar and Smart table. This would work with EDM.DateTimeOffset only. I can't give any concrete timeline here, but perhaps we'll deliver it in the next few months.

Michael Wilk

January 12, 2022 at 4:39 pm

Hi Vladimir,

thank you for the answer!

We are using a SmartTable and it works with the "override" method where the field from the odata service (type Edm.DateTime) can be overriden and utc set to true:

<columns>
    <!--</Column>-->
    <Column id="BEGINNCustom" width="120px" hAlign="End">
        <customData>
            <core:CustomData id="_IDEGen_customdata1" key="p13nData" value='\{"columnKey": "BEGINN", "columnIndex":"5", "leadingProperty": "BEGINN"}'/>
        </customData>
        <Text id="_IDEGen_text1" text="{i18n>BEGINN}"/>
    </Column>
</columns>
<items>
    <!--</ColumnListItem>-->
    <ColumnListItem id="_IDEGen_columnlistitem0x">
        <cells>
            <Text id="_IDEGen_link0x" text="{path: 'BEGINN', type: 'sap.ui.model.type.DateTime', formatOptions: { pattern: 'dd.MM.YYYY HH:mm', UTC: true }}"></Text>
        </cells>
    </ColumnListItem>
</items>

But then the field is automatically display in the table control.

We would like to set this (UTC: true) on the annotation level for many timestamps without overriding the fields and changing the default view for the table control.

We don't want to set a specific timezone we just don't wont the timestamps to be converted into the user's timezone, which is the case and a little bit strange because according to this blog Edm.Datetime fields will not be converted to the user's timezone:

Real-world sample

Use this data type to present a timestamp in its “local” representation and not recalculated to the user’s timezone, e.g. for arrival of a plain on a certain airport (where the user wants to see the local date/time, not recalculated to her current time zone).

but it behaves different.

Br,

Michael

Vladimir Velinov

January 18, 2022 at 2:42 pm

@Michael Wilk please check the reply from Jens.

cheers,

Vladimir

Jens Pflueger

January 18, 2022 at 2:18 pm

Hello Michael,

there is no annotation for the same but a setting on the SMartTable:

<smarttable:SmartTable ...>
  ...
  <smarttable:customData>
      <core:CustomData key="useUTCDateTime" value="true" />
   </smartTable:customData> 
</smartTable:SmartTable >

Does this solve your problem?

Best Regards

Jens

Michael Wilk

January 19, 2022 at 8:41 am

Hi Jens,

this solves my problem! Thank you very much!

Do you know where I can find all the customData options available?

Br,

Michael

Jens Pflueger

January 19, 2022 at 1:46 pm

Hello Michael,

some of the settings are mentioned in the SmartTAble FAQ: https://sapui5.hana.ondemand.com/#/api/sap.ui.comp.smarttable.SmartTable%23faq

Unfortunately not all 🙁 Obviously we need to improve our documentation here.

I'll take this with me.

Best Regards

Jens

Louay Hashim

January 19, 2022 at 12:52 pm

Hello Jens,

Thank you for the explanation and your solution.
I have tried the last solution. There were no syntax errors, but unfortunately it has no effect on the displayed date. It still displayed as local time (In my case UTC+1).
What could be the Problem?

Data-Type: DateTime
Control: smartTable
Sap System: 1.71.28
Code:

....
<smartTable:customData>
<core:CustomData id="id_customDate" key="useUTCDateTime" value="true"/>
</smartTable:customData>
</smartTable:SmartTable>

Jens Pflueger

January 19, 2022 at 1:53 pm

Hello Hashim,

Do you mean date or datetime? In the description you only mention date but type is DateTime. The setting above covers date and time cases only.

You may also try the setting

<core:CustomData key="dateFormatSettings" value='\{"UTC":true,"style":"medium"\}' />

Without a concrete example and debugging it is hard to say more.

Best Regards

Jens

Santiago Garcia

November 15, 2022 at 8:16 pm

Thanks! This is working fine for Dates, but it is not working for a DateTime type... Do you know if there is a similar configuration for DateTime type?

mayur dedhia

April 17, 2023 at 4:10 am

Hello All,

We have a requirement to set all the date formats in the Fiori application based on user locale.

Out application is index.html based application accessible from Fiori Launchpad but opining in a new browser window as a URL tile.

We know that there is a option in Fiori launchpad configurations where we can set the date format and it applies to the applications, but our case is different as we are opening the application in the new window and fiori launchpad configurations won't apply there.

Any help would be appreciated.

Thanks and Regards,

Mayur Dedhia

Technical Articles

UI5 SmartControls: How to use “Date” and “Time”-related Data Types

Why…?

Usage recommendation

For Dates

For Time Stamps containing Date and Time

For Time Stamps containing Date and Time, displayed in their local representation

For Times

Conclusion

Assigned Tags