The SUSE Design System uses cookies to help us learn more about how we can improve the design system.
Learn more about our cookie policy

Didn’t find the component you were looking for? Take a look on what’s coming next or contact us.
Looking for components? what’s next or contact us.

Date & time

Date and time help users to arrange data by chronological order. There are various ways of displaying date and time but it should be clear and understandable to the user.


Date and time are hard to interpret because not all users live in the same timezone or country. That’s why it is important to display date and time in a friendly format.

Use 24-hour clock format for time and written date formate for date.

  • Time: 18:30
  • Date: 17 February 2019
  • Date and time: 26 January 2019, 15:00

linkDate and Time range

Separate ranges with an en-dash without a space.

  • Year: 1 March 2018–2 April 2019
  • Date: 18-20 January 2019
  • Time: 11:30-15:50


Use abbreviations when space is limited.

  • Date: 8 Jan 2019
  • Date and time: 8 May 2019, 11:00
  • Year range: 1 Mar 2017–2 Apr 2018
  • Date range: 18-20 Jan 2019
  • *Note: When documenting sources using MLA style, the months with four or fewer letters, e.g. May, June, and July are not abbreviated, the remaining months Jan, Feb, Mar, Apr, Aug, Sept, Oct, Nov and Dec are abbreviated.

    Abbreviation of months in different languages.