Components

Date display

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

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

<DateDisplay date="2022-07-20" />
Props
Name Type Default Description
id string 'id' attribute to place on the base HTML element
classBlock string Block name override in BEM style classes applied to all elements
classModifiers other BEM style modifiers to apply to the base HTML element
className string Extra classes to apply to the base HTML element
date string The date in ISO format
noWrap boolean 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:

  • a date such as 2022-07-20
  • ISO format such as 2022-07-21T22:37:34.570Z

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

How it works

Standard

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

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

ISO format date-time input

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

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

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

Accessibility

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

Research

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

Help improve this component

This component needs improving. We need evidence about:

  • what services use this component
  • displaying time zones

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