Dates are essential for conveying deadlines, appointments, or time-related information.
Use the Date structure to display or collect dates, whether it's for deadlines, event dates, or when users need to input or select a date.
When to use the Date structure
Use the Date structure for any instance where dates need to be displayed or entered, such as:
- Displaying deadlines for applications, submissions, or other time-sensitive activities
- Providing contextual information, like publication dates, event dates, or updates
- Collecting user input for booking systems, schedules, or forms requiring a date selection (for example, making appointments or entering a date of birth)
Examples in GOSS products
- Event dates and instances in Bookings
- Task Management template when displaying the date of tasks created and due
- Last modified date of a page
Accessibility considerations
To ensure accessibility:
- Correct labelling for screen readers to help users with assistive technologies understand the date format
- Large clickable areas for users to interact with calendar selectors or input fields, ensuring touch-friendly design
- Clear instructions for entering dates, avoiding ambiguity between different date formats (for example UK vs US formats)
Date example
- Use upper case for months and days: January, February, Monday, Tuesday
- Do not use a comma between the month and year: Monday 4 November 2024
- You can add a modifier to the main block to add styling to that element: nvp--caseclosed, nvp--eventdate
The paragraph element on the nvp block can be switched for another element, for example
- Span element if the data is within a block of text <span>
- List item elements if the data is within a list <li> making sure you wrap the element in an ordered or unordered list <ul> or <ol>
Date label Wednesday 30 September 2024
<p class="nvp nvp--modifier">
<span class="nvp__label">Date label</span>
<span class="nvp__value">
<span class="nvp__date">Wednesday 30 September 2024</span>
</span>
</p><p class="nvp nvp--modifier">
<span class="nvp__label">Date label</span>
<span class="nvp__value">
<span class="nvp__date">{{formatDate date "%A %d %B %Y"}}</span>
</span>
</p>Hiding the label
This can be used when you want to show the date but hide the label. The label should be there to explain to screenreaders what the date means in context.
<span class="nvp__label accessibility">...</span>
Add accessibility to the nvp__label element.
You don't have to render the label markup if the date is within a table structure as the label will come from the <th> element within the date cell's column.
Date label Wednesday 30 September 2024
<p class="nvp nvp--modifier">
<span class="nvp__label accessibility">Date label</span>
<span class="nvp__value">
<span class="nvp__date">Wednesday 30 September 2024</span>
</span>
</p><p class="nvp nvp--modifier">
<span class="nvp__label accessibility">Date label</span>
<span class="nvp__value">
<span class="nvp__date">{{formatDate date "%A %d %B %Y"}}}</span>
</span>
</p>Reduced space
When space is an issue, for example in tables or publication titles, you can use truncated months: Jan, Feb as well as remove the day: Monday, Tuesday.
Date label 30 Sep 2024
<p class="nvp nvp--modifier">
<span class="nvp__label">Date label</span>
<span class="nvp__value">
<span class="nvp__date">30 Sep 2024</span>
</span>
</p><p class="nvp nvp--modifier">
<span class="nvp__label">Date label</span>
<span class="nvp__value">
<span class="nvp__date">{{formatDate date "%d %b %Y"}}</span>
</span>
</p>Date range
Use "to" in date ranges rather than hyphens, en rules or em dashes. For example:
- Tax year 2011 to 2012
- Monday to Friday, 9am to 5pm (put different days on a new line, do not separate with a comma)
- 10 November 2011 to 21 December 2011
Date label 10 November 2024 to 21 December 2024
<p class="nvp nvp--modifier">
<span class="nvp__label">Date label</span>
<span class="nvp__value">
<span class="nvp__date">10 November 2024 to 21 December 2024</span>
</span>
</p><p class="nvp nvp--modifier">
<span class="nvp__label">Date label</span>
<span class="nvp__value">
<span class="nvp__date">{{formatDate startDate "%d %B %Y"}} to {{formatDate endDate "%d %B %Y"}}</span>
</span>
</p>Time
We follow the GOV.UK style guide, https://www.gov.uk/guidance/style-guide/a-to-z (opens new window), and use the 12-hour clock when displaying the time, for example 5:30pm and 2:30am.
Date label Wednesday 30 September 2024 at 10:37pm
<p class="nvp nvp--modifier">
<span class="nvp__label">Date label</span>
<span class="nvp__value">
<span class="nvp__date">Wednesday 30 September 2024</span>
<span class="nvp__time"> at 10:37pm</span>
</span>
</p><p class="nvp nvp--modifier">
<span class="nvp__label">Date label</span>
<span class="nvp__value">
<span class="nvp__date">{{formatDate date "%A %d %B %Y}} </span>
<span class="nvp__time"> at {{formatDate date "at %I:%M%p"}}</span>
</span>
</p>Share this page
