Intro

This article describes the international rules for date formats. The SAPUI5 date formatters will help you to comply with these rules.

Usage

Use date formatting if:

  • You need to display dates based on the user’s locale settings.
  • The application is used in an international context.

Types

You can use five different types of date formats: short, mediumlongfull, and relative. The formatting and order of the values differ based on the locale settings that have been configured in the browser.

Short

Dates in short format are displayed as digits for the day, month, and year. Use the right formatting to avoid errors caused by the wrong format!

Formatting differences - Short format
Formatting differences - Short format

Medium

In general, use the medium date format, which usually shows an abbreviation of the month name as text.

Formatting differences - Medium format
Formatting differences - Medium format

Long

Use the long format if you need to display the full names of months. Sometimes there is no difference between the medium and long format.

Formatting differences - Long format
Formatting differences - Long format

Full

If you need to display the day of the week, use the full date format.

Formatting differences - Full format
Formatting differences - Full format

Relative

If it suits your use case, such as ongoing events within a period of six days, use the relative format. Relative dates are displayed as text, for example, today, 6 days, and so on.

The default range for relative dates is between -6 and 6 days relative to the current date.

Formatting differences - Relative format
Formatting differences - Relative format

Guidelines

  • In general, use the medium date format.
  • Use the date picker control if dates have to be entered in an input field.

Object List Item and Object Header

Object list item and object header attributes should be formatted with the long type. If space is at a premium, for example, if attributes consist of a label and a date, use the short date format.

Resources

Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.

Elements and Controls

Implementation