Date and time

Date

Default pattern: [day of the month without leading zeros] [full textual representation of the month] [full numeric representation of a year]
1 January 2023

On the ‘citizen site’, if the date is a future date, for example, an event: [full textual representation of the day] [day of the month without leading zeros][English ordinal suffix for the day of the month, 2 characters] [full textual representation of the month] [full numeric representation of a year]
Tuesday 24th December 2024

The default pattern is preceded with a full textual representation of the day of the week and the day includes a suffix. Suffixes include: st for 1st or 2st, nd for 2nd or 22nd, rd for 3rd or 23rd, and, th for 4th or 15th

On the ‘citizen site’, if the event date is a full day date in the future:
All day, Tuesday 24th December 2024.

With day omitted:
January 2023

With day and month omitted:
2023

<fieldset class="form__fieldset">    
  <legend class="sr-only">Date of birth</legend>    
  <div class="form__group">    
    <p class="form__label" aria-hidden="true">Date of birth</p>    
    <p class="form__hint">For example, 31 3 1981</p>    
    <div class="form__group-inner">    
      <div class="form__date">    
        <label class="form__label form__label-date" for="asp-date-day">Day</label>    
        <input class="form__input" id="asp-date-day" type="number">    
      </div>    
      <div class="form__date">    
        <label class="form__label form__label-date" for="asp-date-month">Month</label>    
        <input class="form__input" id="asp-date-month" type="number">    
      </div>    
      <div class="form__date form__date-year">    
        <label class="form__label form__label-date" for="asp-date-year">Year</label>    
        <input class="form__input" id="asp-date-year" type="number">    
      </div>    
    </div>    
  </div>    
</fieldset>

Multiple dates

Default pattern:
30 January 2023 until 1 February 2023

On the ‘citizen site’, if the dates are a future date:
From Monday 23rd December 2024 until Tuesday 24th December 2024

On the ‘citizen site’, if the dates are both full days in the future:
All day, from Monday 23rd December 2024 until Tuesday 24th December 2024

Time

Default pattern: [24-hour format of an hour with leading zeros]:[Minutes with leading zeros]
09:00

Example of a time past 12/noon:
15:45

Following a date:
30 January 2023, at 09:00

On the ‘citizen site’, if the date and time are in the future:
Monday 23rd December 2024, at 09:00

Multiple times

Default pattern:
09:00 until 15:45

Following a date:
30 January 2023, at 09:00 until 15:45

On the ‘citizen site’, if the date and time are in the future:
Monday 23rd December 2024, at 09:00 until 15:45

Multiple dates with times

Multiple dates and times:
30 January 2023, at 09:00 until 1 February 2023, at 15:45

On the ‘citizen site’, if the dates and times are in the future:
Starts on Monday 23rd December 2024, at 09:00
Ends on Tuesday 24th December 2024, at 15:45

Multiple dates and times, with end time omitted:
On 30 January 2023, at 09:00 until 1 February 2023

On the ‘citizen site’, if the dates and times are in the future:
On Monday 23rd December 2024, at 09:00 until Tuesday 24th December 2024

Multiple dates and times, with start time omitted:
On 30 January 2023 until 1 February 2023, at 15:45

On the ‘citizen site’, if the dates and times are in the future:
On Monday 23rd December 2024 until Tuesday 24th December 2024, at 15:45

Submit a request

Request a change or addition to the design system use this form.

Published 18 January 2024
Last updated 6 August 2024