Day: Spelled out or abbreviated format. See Numerics guidelines for more information.
Date: Can be spelled out, abbreviated form, or digit format. See Numerics guidelines for more information.
Time: Should be displayed in 12-hour or 24-hour ((HH:MM:SS). See Numerics guidelines for more information.
UTC/Timezone: Should always be displayed last, in shorthand form and be in 24-hour format.
Tooltip: Dotted line displayed if there is tooltip available.
When to use
Use a timestamp when:
- You want to represent the exact date and time that an event occurred.
- Users can go back and make use of past content.
- Depending on the context, show either date or time, or both date and time.
- Locale should be appropriately set so that users see dates and times in a familiar format.
- Timestamp at minimum should include date, time, and timezone (shorthand format).
- Every element does not need to be used when implementing a timestamp.
- Not required but recommended to provide more precise time for relative times.
- Tooltips should show timestamps in UTC time.
- Recommend displaying time in 24-hour format.
- Displays time in UTC (Universal Coordinated Time).
- Should be formatted the same as the timestamp.
See numerics guidelines for more information about relative time best practices.
In the 12-hour format, use AM to refer to a time of day before noon, and PM to speak of a time between noon and midnight.
In the 24-hour clock format, each day runs from midnight to midnight and is divided into 24 hours, beginning with 00:00 AM at midnight.
Abbreviated date usage is recommended when you have space restrictions. When abbreviating dates follow the date and time format.
View source on GitHub