Skip to main content

This is a guide on using the GOV.UK Design System Form Builder

  1. Index
  2. Date fields

Date fields

Date fields allow the user to enter the day, month and year of an event.

Three inputs for day, month and year respectively are used to capture the dates rather than a date picker. This is because:

  • some users find date inputs difficult to use
  • often users will be expected to enter a date they know rather than to pick a date

Exact date field with legend and hint and birth date autocompletion

Input

= f.govuk_date_field :date_of_birth,
  date_of_birth: true,
  legend: { text: 'Enter your date of birth' },
  hint: { text: 'For example, 31 3 1980' }
<%= f.govuk_date_field :date_of_birth, date_of_birth: true, legend: { text: 'Enter your date of birth' }, hint: { text: 'For example, 31 3 1980' } %>

Rendered output

Enter your date of birth For example, 31 3 1980

HTML output

<div class="govuk-form-group">
  <fieldset class="govuk-fieldset" aria-describedby="person-date-of-birth-hint">
    <legend class="govuk-fieldset__legend govuk-fieldset__legend--m">
      Enter your date of birth
    </legend>
    <span class="govuk-hint" id="person-date-of-birth-hint">
      For example, 31 3 1980
    </span>
    <div class="govuk-date-input">
      <div class="govuk-date-input__item">
        <div class="govuk-form-group">
          <label class="govuk-label govuk-date-input__label" for="person_date_of_birth_3i">
            Day
          </label>
          <input id="person_date_of_birth_3i" class="govuk-input govuk-date-input__input govuk-input--width-2" name="person[date_of_birth(3i)]" type="text" pattern="[0-9]*" inputmode="numeric" autocomplete="bday-day">
        </div>
      </div>
      <div class="govuk-date-input__item">
        <div class="govuk-form-group">
          <label class="govuk-label govuk-date-input__label" for="person_date_of_birth_2i">
            Month
          </label>
          <input id="person_date_of_birth_2i" class="govuk-input govuk-date-input__input govuk-input--width-2" name="person[date_of_birth(2i)]" type="text" pattern="[0-9]*" inputmode="numeric" autocomplete="bday-month">
        </div>
      </div>
      <div class="govuk-date-input__item">
        <div class="govuk-form-group">
          <label class="govuk-label govuk-date-input__label" for="person_date_of_birth_1i">
            Year
          </label>
          <input id="person_date_of_birth_1i" class="govuk-input govuk-date-input__input govuk-input--width-4" name="person[date_of_birth(1i)]" type="text" pattern="[0-9]*" inputmode="numeric" autocomplete="bday-year">
        </div>
      </div>
    </div>
  </fieldset>
</div>

Approximate dates - recording the closest month

!WarningDate inputs without a day field are not currently part of the GOV.UK Design System

When asking for dates that the user might not know or could struggle to remember, such as their graduation date, the exact date might not be necessary. The day can be optionally omitted by providing the omit_day parameter.

When mapped to a Date attribute, Ruby will automatically set the Day to be 1 when none is provided. This should be taken into account when displaying the data or using it for analysis.

Input

= f.govuk_date_field :graduation_month,
  omit_day: true,
  legend: { text: 'When did you graduate?' },
  hint: { text: 'For example, 3 2014' }
<%= f.govuk_date_field :graduation_month, omit_day: true, legend: { text: 'When did you graduate?' }, hint: { text: 'For example, 3 2014' } %>

Rendered output

When did you graduate? For example, 3 2014