Forms

Date input

Date input

Help users to enter or select a date.

Open this date input example in a new tab
HTML
<fieldset>
  <legend class="occlss-form__group-title occlss-u-bspace-none">Date of birth</legend>
  <span class="occlss-form__hint-text occlss-u-bspace-sm" id="dobHint">For example: 14 08 1972</span>
  <div class="occlss-form-cntrls occlss-form-cntrls--day">
    <label class="occlss-form-cntrls__label occlss-form-cntrls__label--small" for="date_of_birth_2">Day</label>
    <input class="occlss-form-cntrls__input" aria-describedby="dobHint" id="date_of_birth_2" name="date_of_birth_2" pattern="0?[1-9]|1[0-9]|2[0-9]|3[01]" type="number" min="1" max="31" value="">
  </div>
  <div class="occlss-form-cntrls occlss-form-cntrls--month">
    <label class="occlss-form-cntrls__label occlss-form-cntrls__label--small" for="date_of_birth_1">Month</label>
    <input class="occlss-form-cntrls__input" aria-describedby="dobHint" id="date_of_birth_1" name="date_of_birth_1" pattern="0?[1-9]|1[012]" type="number" min="1" max="12" value="">
  </div>
  <div class="occlss-form-cntrls occlss-form-cntrls--year">
    <label class="occlss-form-cntrls__label occlss-form-cntrls__label--small" for="date_of_birth_3">Year</label>
    <input class="occlss-form-cntrls__input" aria-describedby="dobHint" id="date_of_birth_3" name="date_of_birth_3" pattern="[0-9]{4}" type="number" min="1900" max="2000" value="">
  </div>
</fieldset>

When to use this pattern

This is the pattern used for asking for a memorable date. For example, a person’s date of birth.

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.

Changelog

1.0.0

  • Component Added