Elements
![Timestamp with tooltip underline](/images/timestamp-elements.ad59a7869d96b53d.png)
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.
Usage
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.
Best practices
For timestamp
- 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.
For tooltip
- 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.
Variations
12-hour format
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.
![Timestamp AM/PM format](/images/timestamp-using-am-pm.3360e73035c7944c.png)
24-hour format
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.
![Timestamp with 24 hour format](/images/timestamp-24-hour-format.970d7ef17db27eae.png)
Abbreviated date
Abbreviated date usage is recommended when you have space restrictions. When abbreviating dates follow the date and time format.
![Timestamp with abbreviated date format](/images/timestamp-Abbreviated-date.9955ed0070b84bcf.png)
View source on GitHub