Overview

To make software easy to use in an international context, it’s important to apply consistent formatting rules to data. You can find data formatting guidelines here for date and time. For other data types, such as numbers or units of measurement other than date or time, please refer to Fiori Guidelines - Formatting Data.

Usage

<div> <div>You want to indicate...</div> <div>For example...</div> <div>Link to relevant guideline...</div> </div> <div> <div>a precise date</div> <div>The date when a task is due for completion</div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fr%2F_EdmBYSEGdpSFQSaVSKg7bbDMPopWgSpEn7oriuS2pc">Date Formats</a></div> </div> <div> <div>a precise time</div> <div>The time at which a job is scheduled to run on the system</div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fr%2Fp8paWvoQzyooXfVCL-V8KOYsgGGhoBo6APZRYvaW3Ls">Time Formats</a></div> </div> <div> <div>a precise time and date</div> <div>the time and date for a user task or system event</div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fr%2FpWlMjmhZBG5dMj_uKrIHP-tZTpJ8MoNY6MhZm6W0CQs">Combined Date and Time Format</a></div> </div> <div> <div>a start or end time relative to the current moment</div> <div>The moment a system process will occur next, relative to now ("Start date: in 3 days")</div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fr%2FRBmFwq8NKgHkf44uw3ZxFDcvNFnW-0C2cEz2Yb_7pOw">Relative Time</a></div> </div> <div> <div>a time period or duration of time</div> <div>The duration of a system update</div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fr%2Ft-g-82NQZPZ-pJqWznIZVUUCOEO71troCn8rmGFYK80">Time Periods or Duration</a></div> </div> <div> <div>an interval or range of time</div> <div>The start and end time of a meeting</div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fr%2F-XC0IO5j5mT07oViCAZitKgpQHGTsne8zb9D7h88JxA">Intervals of Time</a></div> </div> <div> <div>the frequency of a recurrent event or activity</div> <div>The frequency of a repeated event or process</div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fr%2FK0DqG2rXtFdyxvYzcACD6ADdkh-IsC8N52roGwqJRTI">Recurrence of Tasks or Events</a></div> </div>

Date Formats

You can choose from amongst several possible formats for date (e.g., short format, medium format, long format). See Fiori Guidelines - Formatting Dates. In general, the medium format is recommended, as shown in the following table. Place the month before the day:

2
do
false

English (US): Aug 7, 2021

Chinese (CN): 2021年8月7日

German (DE): 07.08.2021

dont
false

English (US): 7 Aug, 2021

Chinese (CN): 8月7日2021年

German (DE): 08.07.2021

information
Note: The date formats are based on standard formats defined by CLDR (Unicode Common Locale Data Repository) for each locale. These date formats are built into SAP UI5. You can view the format for each supported language/locale on this SAP UI5 test page.

Time Formats

Fiori Guidelines include several different formats for time, ranging from longer formats to shorter formats. You need to choose whether the longer or shorter format works best in the context of your use case and your target user. In general:

Basic time format

To see the possible formats for time, refer to Fiori Guidelines - Formatting Time. Here's an example of how to use the medium format for time. Use a colon (:) to separate the different time units:

2
do
false

United States (US): 11:17:57 AM

Germany (DE): 11:17:57

China (CN): 上午11:17:57

Denmark (DK): 11.17.57

dont
false

United States (US): 11.17.57 AM

Germany (DE): 11.17.57

China (CN): 上午11.17.57

Denmark (DK): 11:17:57

12-hour and 24-hour clock formats

Most English-speaking countries use the 12-hour clock (for example, the United States, India, and the United Kingdom). Non-English speaking countries use the 24-hour clock. Use capital letters for the abbreviations “AM” and “PM” with no period between the letters.

12-hour clock example:

2
do
false
11:17 AM
dont
false
11.17 a.m.

Time zones

If you need to include the time zone, use the long time format (see Fiori Guidelines – Formatting Time - Long Format). All time zones are defined as offsets from Coordinated Universal Time (UTC), ranging from UTC−12:00 to UTC+14:00. The offsets are usually a whole number of hours, but a few zones are offset by additional 30 or 45 minutes, such as in India (with a time offset of UTC+05:30) and Nepal (with a time offset of UTC+05:45). Use the abbreviated form of the time zone in capital letters and place it in parentheses ( ). For example:

2
do
false
11:17 AM (UTC+1)
dont
false
11:17 AM UTC+1

Combined Date and Time Format

When you combine date and time, use full formats to maximize readability for the user. Separate the date and the time with a comma ( , ). See Fiori Guidelines – Date and Time Picker.

2
do
false
May 27 2021, 5:45 AM
dont
false
May 27 2021 – 5:45 AM
information
Note: The punctuation for time and date formats is based on standard formats defined by CLDR (Unicode Common Locale Data Repository) for each locale and are built into SAP UI5. You can view the format for each supported language/locale on this SAP UI5 test page.

Relative Time

Use relative time when you want to indicate the time at which an event should occur in relation to the current time. For example, “Schedule refresh in 30 minutes” indicates that the refresh will occur 30 minutes later than the current time.

For user-initiated actions, such as tasks, use conversational wording to replace units of time when the unit is equal to 1. For example, to specify a future deadline “in 1 day” from the present moment use “” instead of "1 day."

Refer to this table to see how to express relative time for a user action or task:

<div> <div>Time Unit</div> <div>Action occurs in the future</div> <div>Action occurs in the past</div> </div> <div> <div>Minute</div> <div>in a minute / in 2 minutes / in 3 minutes etc.</div> <div>a minute ago / 2 minutes ago / 3 minutes ago etc.</div> </div> <div> <div>Hour</div> <div>in an hour / in 2 hours / in 3 hours etc.</div> <div>an hour ago / 2 hours ago / 3 hours ago etc.</div> </div> <div> <div>Day</div> <div>Tomorrow / in 2 days / in 3 days etc.</div> <div>yesterday / 2 days ago / 3 days ago.etc.</div> </div> <div> <div>Week</div> <div>Next week / in 2 weeks / in 3 weeks etc.</div> <div>a week ago / 2 weeks ago / 3 weeks ago etc.</div> </div> <div> <div>Month</div> <div>Next month / in 2 months / in 3 months etc.</div> <div>a month ago / 2 months ago / 3 months ago etc.</div> </div>

SAP Business Technology Platform apps and tools expose information about system processes to users. For these use cases, use numerical units to express relative time instead of the more conversational approach advocated in Fiori guidelines, where vocabulary like "tomorrow" and "in a minute" is used to address users of business applications. For example, to specify a future system refresh “in 1 day” from the present moment use "" instead of the more conversational “tomorrow.”

Refer to this table to see how to express relative time for a system process or event:

<div> <div>Time Unit</div> <div>System process occurs in the future</div> <div>System process occurs in the past</div> </div> <div> <div>Minute</div> <div>in 1 minute / in 2 minutes / in 3 minutes etc.</div> <div>1 minute ago / 2 minutes ago / 3 minutes ago etc.</div> </div> <div> <div>Hour</div> <div>in 1 hour / in 2 hours / in 3 hours etc.</div> <div>1 hour ago / 2 hours ago / 3 hours ago etc.</div> </div> <div> <div>Day</div> <div>in 1 day / in 2 days / in 3 days etc.</div> <div>1 day ago / 2 days ago / 3 days ago etc.</div> </div> <div> <div>Week</div> <div>in 1 week / in 2 weeks / in 3 weeks etc.</div> <div>1 week ago / 2 weeks ago / 3 weeks ago etc.</div> </div> <div> <div>Month</div> <div>in 1 month / in 2 months / in 3 months etc.</div> <div>1 month ago / 2 months ago / 3 months ago etc.</div> </div>

Time Periods or Duration

How you express time duration, depends on whether your use case covers a user action or a system process.

User Actions

For a user action, such as a task, express time units using the full form.

For a complete list of formats to use for time duration, see Fiori Guidelines - Durations.

2
Time Period User Action Do.png
do
false
Time Period User Action Dont.png
dont
false

System Processes

For a system process (for example, the duration of a query execution), express time units using abbreviations. Always use the singular form of the abbreviation.

For the complete list of abbreviations you can use for time duration, see SAP Style Guide for Technical Communication - Common Units of Measurement for Time.

2
Time Period System Do.png
do
false
Abbreviations "h" and "min" are in the singular form.
Time Period System Dont.png
dont
false
Abbreviations in the message are in the plural form.

Intervals of Time

Expressing an interval of time is necessary if your use case covers an activity or process that needs to be planned or scheduled to occur during a specific window of time. For example, planning a task or scheduling a system event.

Field labels:

<div> <div>Type or activity or process</div> <div>Text for field labels</div> </div> <div> <div>User task</div> <div>Start date / Due date</div> </div> <div> <div>System process</div> <div>Start date / End date</div> </div>
Image

Example

Use "Start Date" for when the task starts and "Due Date" for when the task ends.

Recurrence of Tasks or Events

Several use cases require the planification of events that need to be repeated over time. For example:

The user needs to specify the recurrence or frequency of the event.

Terms for UI labels

<div> <div>UI label</div> <div>Term to use</div> <div>Format for unit of time</div> </div> <div> <div>Group title</div> <div>Recurrence</div> <div>See <a href="https%3A%2F%2Fwww.sap.com%2Fr%2FpWlMjmhZBG5dMj_uKrIHP-tZTpJ8MoNY6MhZm6W0CQs">Combined Time and Date Formats</a></div> </div> <div> <div>Field label to set frequency of task or event</div> <div>Repeat Every:</div> <div>See <a href="https%3A%2F%2Fwww.sap.com%2Fr%2FpWlMjmhZBG5dMj_uKrIHP-tZTpJ8MoNY6MhZm6W0CQs">Combined Time and Date Formats</a></div> </div> <div> <div>Pattern for field values</div> <div><numerical value> <time unit></div> <div>See Example, below.</div> </div>
Example
Image

Resources

Formatting Data

Formatting Dates

Formatting Time

Date/Time Picker

Units of Measurement and Scientific Symbols

Support

If you have any questions or feedback about this page, please contact our team. For further information and questions in regards to the Design System, please visit the DNA Design SharePoint.