Display dates and times

[tomyems]

A proof of concept has been developed that can display dates and times in a format that is easy for a human to read, as opposed to the ISO format in which is it stored:

• Date is formatted from an ISO datetime string to meet GOV style guidelines
• Date can be displayed in a configured format
• Date can be displayed with or without time in a configured order

There is some technical detail #350 alongside guidance about when to use the formats, with the current version available https://626b9e86a2864b53b69d5476--hods.netlify.app/.

[tomyems]

From the monthly design crit:

• place all the guidance on one page, as just different variations on the component
• provide the next steps in the contribute on how to contribute to the component
• make consistent with the rest of the components about where the main example is
• reduce the duplication in the time format section
• the timeline component will need updating so that the date and time are consistent with this method of displaying dates and times

One internal system did use dates and times combined in a timeline activity log and in file uploads. It displayed times in the 12 hour clock.

As a result of this feedback the guidance has been iterated, with the current version being: https://62729855d02ed2165eab2204--hods.netlify.app/components?name=Date%20and%20time%20display

[tomyems]

Following additional feedback that:

• there were too many examples which was confusing
• the heading 1 didn't match the text in the menu on the left hand side

See the current version: https://62751cec792e88117276676c--hods.netlify.app/components?name=Date%20and%20time%20display

[tomyems]

This is now being delivered through #350.

[tomyems]

Published: https://design.homeoffice.gov.uk/components?name=Date-time

If you have any suggestions or improvements add them to this discussion. Including if you have any insights on:

• when to use the 24-hour clock
• displaying time zones
• when to display the date before the time, or the time before the date

[tomyems]

Suggestion from @Sarah-Lombardi (#554) to change the label in the menu and the heading on the component page (https://design.homeoffice.gov.uk/components?name=Date-time) to 'Date and time'