Use this component to display dates and times in an easy to read standard format.
|'id' attribute to place on the base HTML element
|Block name override in BEM style classes applied to all elements
|BEM style modifiers to apply to the base HTML element
|Extra classes to apply to the base HTML element
|Date-time string in ISO-8601 format
|Displays time or date first
|Displays time as a 12 or 24 hour clock
When to use this component
This component is a standard code implementation for displaying easy to read dates and times to users from ISO format.
How it works
You should use the 12-hour clock. For example, 5:30pm and 2:30am.
If you have evidence that your internal users regularly use the 24-hour and find it easier, then you may choose to use the 24-hour clock to display time. For example, 17:30 and 02:30. We need more evidence and research to validate this.
Order of date and time
You should use evidence to assess whether the date or the time is most important to your users.
If the time is more important, change the order so that the time comes before the date.
If your service uses this component, let us know of any insights you have on accessibility considerations.
Help improve this component
This component needs improving. We need evidence about:
- when to use the 24-hour clock
- displaying time zones
- when to display the date before the time, or the time before the date
- how to write for this component
- which services are using this component