Date formats
Relative dates
Use relative dates when a general understanding of sequence is sufficient to communicate meaning. Use absolute dates when precision is needed, for example in logging or supporting an exact understanding of an event sequence.
Tooltips – Use tooltips over relative dates that show the localised day of the week, date, time, and timezone of the event.
Printing – Relative dates lose their meaning when printed. Use CSS media rules to display an absolute date when printed.
Permalinks – Note that both relative and absolute dates can serve as the affordance for permanent links to a timestamped item.
Internationalization – There are many international date formats. Our intention is to use formats that are concise yet easy to understand.
Past events
Time of event | Displayed value |
---|---|
Within the last few seconds | Just now |
Within 59 minutes | x minutes ago |
Within 60 minutes | 1 hour ago |
x hours ago | x hours ago |
1 day ago (by date, not hours) | Yesterday |
2 days ago < 7 days | x days ago |
7 days ago | 1 week ago |
> 7 days ago | Datestamp: i.e. "20 Dec 2013" |
Future events
Time of event | Displayed value |
---|---|
Within the next few seconds | Now |
In the next minute | In 1 minute |
In the next 60 minutes | In x minutes |
In 60 minutes | In 1 hour |
In x hours | In x hours |
In 1 day (by date, not hours) | Tomorrow |
In 2 to 7 days | In x days |
In 7 days | In 1 week |
In > 7 days | Datestamp: i.e. "20 Dec 2013" |
Absolute dates
Below are three alternatives for displaying date and time information at several levels of granularity.
Granularity | Displayed value |
---|---|
Date only | 20 Dec 2013 |
Date + time | 20 Dec 2013 11:34PM |
Date + time + timezone | 20 Dec 2013 3:31AM GST |