Formatting Dates
sap.ui.core.format.DateFormat
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, medium, long, full, 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
Medium
In general, use the medium date format, which usually shows an abbreviation of the month name as text.
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
Full
If you need to display the day of the week, use the full date 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
Guidelines
- In general, use the medium date format.
- Use the DatePicker control when 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.
Do
Long type to format attributes in object list items and object headers
Do
Use relative format for an object status in the master list
Do
Use medium date format in a responsive table
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
- Date Picker (guidelines)
- Object List Item (guidelines)
- Object Header (guidelines)
- Object Status (guidelines)
- Responsive Table (guidelines)
Implementation
- DateFormat (SAPUI5 API reference)
- DatePicker (SAPUI5 API reference)
Visual Design
- No links