Components

Date display

Display a date following the date guidance for GOV.UK.

20 July 2022

<time class="hods-date-display" datetime="2022-07-20">
  20 July 2022
</time>

<DateDisplay date="2022-07-20" />

Props

Name	Type	Description
id	other	'id' attribute to place on the base HTML element
classBlock	other	Block name override in BEM style classes applied to all elements
classModifiers	other	BEM style modifiers to apply to the base HTML element
className	other	Extra classes to apply to the base HTML element
date	string	The date in ISO format
noWrap	other	Whether to not wrap the date in a time element

When to use this component

This component is a standard code implementation for displaying easy to read dates to users from:

Follow the GOV.UK date guidance to decide which format to use within your service.

20 July 2022

<time class="hods-date-display" datetime="2022-07-20">
  20 July 2022
</time>

<DateDisplay date="2022-07-20" />

You can provide a full ISO formatted date-time) and display just the time as calculated from the timezone.

21 July 2022

<time
  class="hods-date-display"
  datetime="2022-07-21T23:37:34.570Z"
>
  21 July 2022
</time>

<DateDisplay date="2022-07-21T23:37:34.570Z" />

If your service uses this component, let us know of any insights you have on accessibility considerations.

If your service uses this component, let us know of any research findings.

This component needs improving. We need evidence about:

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