Beta This is new guidance. Complete our quick 5-question survey to help us improve it.

This guidance explains how to ask users to enter dates.

Meeting the Digital Service Standard

To pass point 13 (make the user experience consistent with GOV.UK) in your service assessments, you must use GOV.UK design patterns and guidance.

Read the guide on using, adapting and creating patterns before you start designing or building anything.

Types of date

The way you should ask users for dates depends on the types of date you’re asking for, for example:

  • memorable dates (for example, date of birth or marriage)
  • dates from documents or cards (for example, a passport or credit card)
  • approximate dates (like ‘June 1983’)
  • relative dates (like ‘4 days from today’)

Asking for memorable dates

To ask for memorable dates, like dates of birth, use text fields for users to complete.

For example:

Dates 1-.png

Use 3 fields as it’ll be easier for you to validate each part rather than trying to review a single field.

Don’t automatically tab users between fields because this can clash with normal keyboard controls and confuse people.

Calendar controls (visual calendars which can be used to select dates) aren’t particularly useful for known dates and some users struggle to select date boxes.

Triggering the iPhone numeric keyboard

To trigger the numeric keyboard on iPhones, add a pattern attribute to the input element like this: pattern="[0-9]*"

Asking for dates from documents and cards

If you ask for a date exactly as it’s shown on a passport, credit card or similar item, make the fields match the format of the original. This will make it easier for users to copy it across accurately.

Asking for approximate dates

If you don’t need an exact date and you’re asking for one that users might struggle to remember (for example ‘the date you lost your passport’), make sure you allow them to enter an approximate date, like ‘June 1983’.

Here’s an example:

Dates 2.png

Asking for relative dates

You may need to ask for dates that are relative to today’s date or another date - this is common if a user is booking an appointment.

To do this you should let users enter or select relative dates like ‘tomorrow’ or ‘4 days later’. If the day of the week is important, show this as well.

Using calendar controls

Only use a calendar control if users will need to do any of these things:

  • know the day of the week as well as the date
  • compare dates
  • enter date ranges

For example, a calendar control might help users who need to book an appointment as part of using your service.

If you need to show available dates, embed the calendar in the page and make it large enough for the information to be readable.

Here’s an example:

Screen Shot 2017-02-23 at 14.27.58.png

Never make a calendar control that depends on JavaScript as the only input option.

How to write dates

If you need to write a date, use ‘day month year’, for example ‘8 July 2017’. Don’t use a comma between the month and the year.

Use ‘to’ in date ranges (not hyphens or dashes), for example ‘8 July to 9 August’.

How to check that dates are valid

To check that the dates users give you are valid, you should make sure that:

  • the first date in the date range is before the second
  • past dates are in the past
  • future dates are in the future
  • you check for mistyped dates

Discuss dates

Discuss asking for dates on the design patterns wiki.

You may also find these guides useful:

Published by:
Design community
Last update:

Guidance first published