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 |