Components

Date-time

Use this component to display dates and times in an easy to read standard format.

<time
  class="hods-date-time"
  datetime="2022-07-21T22:37:34.570Z"
>
  21 July 2022 at 10:37pm
</time>

<DateTime dateTime="2022-07-21T22:37:34.570Z" />
Props
NameTypeDefaultDescription
idother'id' attribute to place on the base HTML element
classBlockotherBlock name override in BEM style classes applied to all elements
classModifiersotherBEM style modifiers to apply to the base HTML element
classNameotherExtra classes to apply to the base HTML element
dateTimestringDate-time string in ISO-8601 format
precedenceotherDisplays time or date first
clockTypeotherDisplays 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.

Follow the time GOV.UK style guidelines and the GOV.UK date guidance to decide which format to use within your service.

How it works

Time format

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.

<time
  class="hods-date-time"
  datetime="2022-07-21T22:37:34.570Z"
>
  21 July 2022 at 22:37
</time>

<DateTime
  dateTime="2022-07-21T22:37:34.570Z"
  clockType={24}
/>

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.

<time
  class="hods-date-time"
  datetime="2022-07-21T22:37:34.570Z"
>
  10:37pm on 21 July 2022
</time>

<DateTime
  dateTime="2022-07-21T22:37:34.570Z"
  precedence="time"
/>

Accessibility

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

To contribute, add your thoughts and research findings to our GitHub discussion, or follow our contribute guidance.