These guidelines do not cover how to store and exchange date and time data.
Display date and time
There are two types of timestamps - absolute and relative. Absolute timestamps display the exact date and time and relative timestamps display the number of minutes, hours, days, weeks or years from an event happened or till an event will happen.
| Absolute | Relative |
|---|---|
| Published 11 November 2022 15:19 | Published 30 minutes ago |
Absolute timestamps
Absolute timestamps should be used in all cases where users need to know exactly when something happened or will happen e.g. when a document was published or when a task will start. The benefit of absolute timestamps are that they offer a precise date and time, but can sometimes be difficult to interpret because of different timezones.
Absolute timestamp formatting
When we write and display absolute date and time we use the British date format and the 24hour clock format e.g. 12 April 2022 13:46.
Best practice
- Using the British date format aligns with the guidelines on Brand Central
- Use upper case for months e.g. January, February etc.
- Use upper case for weekdays e.g. Monday, Tuesday etc.
- Avoid adding a leading zero to days e.g. “4 March” not “04 March”
- Don’t use commas between the month and year
- The 24hr clock system is the recommended time format because it prevents ambiguity
- Adding the timezone to the timestamp can prevent misunderstandings
- Capitalise the timezone
| Granularity | Displayed value |
|---|---|
| Week day + Date | Friday, 24 February 2023 |
| Date | 24 February 2023 |
| Date + time | 24 February 2023 14:45 |
| Date + time + timezone (UTC) | 24 February 2023 14:45 UTC+01 |
| Date + time + time zone (Alphabetical abbreviations) | 24 February 2023 14:45 CET |
Use the following format and sequence to display the full date and time: Week day, Date + Time + Timezone.
British date format
Maersk is officially using the British date format to display dates as per Brand Central Guidelines. The British date format is: day-month-year.
24 September 2022
September 24th, 2022
24hr clock
The 24hr clock system minimises misunderstandings and is well-known in the shipping industry.
Use the following format:
[hh]:[mm]:[ss].
- [hh] = zero-padded hour between 00 and 23
- [mm] = zero-padded minute between 00 and 59
- [ss] = zero-padded second between 00 and 60 (where 60 is only used to denote an added leap second)
Use the ratio symbol (Unicode 2236) rather than the standard colon as the delimiter between hours, minutes and seconds. The ratio symbol is vertical aligned to the centre while the standard colon is aligned to the baseline.
Time zones
We recommend that you use UTC (Coordinated Universal Time) and not the alphabetical abbreviations, since these can be ambiguous e.g. “CST” can mean China Standard Time (UTC+08), Cuba Standard Time (UTC-05), and (North American) Central Standard Time (UTC-06).
| Granularity | Displayed value |
|---|---|
| Date + time + timezone (UTC) | 24 February 2022 14:45 UTC+01 |
| Date + time + timezone (alphabetical abbreviations) | 24 February 2022 13:45 CET |
30-minute and 45-minute UTC offsets
Some time zones have a 30-minute and 45-minute offset e.g. Indian Standard Time (UTC+05:30) and Chatham Standard Time (UTC+12:45). These time zones should be formatted in the following way:
| Granularity | Displayed value |
|---|---|
| Date + time + timezone (UTC 30-minute offset) | 24 February 2022 14:00 UTC+09:30 |
| Date + time + timezone (UTC 45-minute offset) | 24 February 2022 14:00 UTC+05:45 |
Adding UTC to the alphabetical abbreviations
If you need to use alphabetical abbreviations, then consider adding the UTC offset as well - e.g. CST (UTC+08), CST (UTC-05) and CST (UTC-06).
| Granularity | Displayed value |
|---|---|
| Date + time + timezone (alphabetical abbreviations + UTC) | 24 February 2022 13:45 CET (UTC+01) |
See the full list of time zone abbreviations.
Other abbreviations
If space is limited then use abbreviations:
| Term | Abbreviation |
|---|---|
| Months (January to December) | Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec |
| Days of the week (Monday to Sunday) | Mon, Tue, Wed, Thu, Fri, Sat, Sun |
Relative timestamps
- Use relative timestamps when accuracy is less important than immediacy.
- Use to show total calculation of how much time has passed or will pass from the current time.
- Use when users expect the displayed time to be in their own time zone.
- Round down to nearest whole minute, hour or day.
e.g. 1 hour and 50 minutes, should be “1 hour ago”
Formatting past events
| When the event happened | Displayed value |
|---|---|
| Less than a 1 minute ago | Now |
| More than 1 minute ago and less than 60 minutes | x minutes ago |
| 60 minutes ago | 1 hour ago |
| X hours ago | x hours ago |
| Previous calendar date | Yesterday |
| 2-6 days ago | x days ago |
| 7 days ago | 1 week ago |
| > 7 days ago | Datestamp: i.e. 20 Dec 2021 |
Formatting future events
| When the event will happen | Displayed value |
|---|---|
| Within the next few seconds | Now |
| In the next minute | In 1 minute |
| Within 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 hour) | Tomorrow |
| More than 1 and less than 7 days | In x days |
| In 7 days | In 1 week |
| In more than 7 days | Datestamp: i.e. 12 Apr 2026 |
Input of date and time
How we ask users about dates depends on the type of date we are asking for. The following dates are examples of what we could ask users for.1
Dates on cards and documents
When requesting people to input dates from cards or documents make sure to match the original format with the form fields. e.g. expiration date on a credit card.
Picking dates
When you need people to select a specific day or a range of days, you can present them in a calendar format. It assist users when they need to pick dates by giving them context to the individual days and relating them to other dates.
- We recommend to combine the calendar with the Input date to allow users to enter the date directly without picking and navigating.
- You can customise how the days are displayed in the calendar, if you need to communicate extra information to the user. e.g. available bookings.
- If there are any days that users can’t select and submit, you should disable them to prevent invalid input.
Memorable dates
These could be any date that people can recall easily e.g. date of birth or own company registration date. When you need people to input a memorable date, then aim to follow the recommendations below:
- Allow users to input the date in a quick manner, such as using the number keys instead of selecting with calendar, which might take longer time.
- Pre-format either the input date or text fields to match the expected format from the user. e.g. requesting the date of birth.
Approximate dates
If people are unsure about or don’t need to specify exact day when inputing a date you can support them by allowing entry of approximate dates. For example, you can allow people to only input a month and year as a date.
Relative dates
In some cases, there is a need to input or select a date that is relative to another date. For example, filtering results from the last 30 days from today.
- Make sure any relative date option clearly communicates if they are for the past or future period of time. e.g. “Next 3 months”
- Offer a sensible amount of options for relative date selection not to overwhelm the user with choices.
- Use time periods that make sense for the user and application context. e.g. Searching data from the past will offer only relative time options in relation to today’s date.
- You can use relative date options in combination with input date and calendar to provide people with shortcuts for picking a date range.
- gov.uk - ask users for dates