Patterns

Dates

Use this pattern to ask users for a date.

 

Portal Code example

When did you move into the property?

For example 12 11 2009

                        
                         <legend class="heading1">When did you move into the property?</legend>
<p class="hint">For example 12 11 2009</p>
<div class="form__inline">
<div class="form__control">
<label for="movein_dd">Day</label>
<input class="text form-control  input-width--70" type="text name="movein_dd"/>
</div>
<div class="form__control">
<label for="movein_dd">Month</label>
<input class="text form-control input-width--70" type="text name="movein_mm"/>
</div>
<div class="form__control">
<label for="movein_dd">Year</label>
<input class="text form-control  input-width--100" type="text name="movein_yyyy"/>
</div>
</div>

When to use this

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

Dates you may need users to provide include:

  • memorable dates, like a date of birth or marriage
  • dates from documents or cards, like a passport or credit card
  • approximate dates, like ‘December 2017’
  • relative dates, like ‘4 days from today’

In some cases you might need users to pick a date from a given selection.

Asking for dates from documents and cards

When asking for a date exactly as it’s shown on a passport, credit card or other document, make the fields match the format of the original. This makes it easier for users to copy the date across accurately.

Asking for approximate dates

Allow users to enter an approximate date when you are asking them for information they may not know or may struggle to remember. For example, allow users to enter ‘December 2017’ for a field that says ‘the date you lost your passport’.

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 setting a reminder.

To do this let users enter or select relative dates like ‘tomorrow’ or ‘1 day before’. If the day of the week is important, show this as well.

Helping users to pick a date

Users might need to pick a date from a selection, for example, to book an appointment.

To do this, you can present dates in a calendar format using a calendar control. Users are typically shown one month’s worth of dates at a time, and can skip through months and years.

Only use a calendar control if users need to:

  • pick a date in the near future or recent past
  • know the day of the week, or the week of the month, as well as the date
  • be able to see dates in relation to other dates

Never make a calendar control that depends on JavaScript as the only input option. Allow users to enter the date into a text input as well as use the control.

How to check that dates are valid

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

  • it’s a real date, for example, not 54 July
  • past dates are in the past
  • future dates are in the future
  • the first date in a date range is before the second

Make sure you accept numbers below 10 both with and without a leading zero.

Back to top