Ask users for Dates

Help users enter or select a date.

When to use this pattern

Follow this pattern whenever you need users to provide or select a date as part of your service.

How it works

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 memorable dates

Ask for memorable dates, like dates of birth, using the date input component.

<div class="app-example app-example--tabs">
  <div class="app-example__toolbar">
    <a href="/patterns/dates/default/index.html" class="app-example__new-window" target="_blank">
      Open this
      <span class="govuk-visually-hidden">asking for dates from documents</span>
      example in a new tab
    </a>
  </div>
  <iframe title="Asking for dates from documents example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--s" src="/patterns/dates/default/index.html" frameBorder="0" loading="lazy"></iframe>
</div>

<span id="options-asking-for-dates-from-documents-example"></span>
<ul class="app-tabs" role="tablist">
  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#asking-for-dates-from-documents-example-html" role="tab" aria-controls="asking-for-dates-from-documents-example-html" data-track="tab-html">HTML</a></li>
  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#asking-for-dates-from-documents-example-nunjucks" role="tab" aria-controls="asking-for-dates-from-documents-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
</ul>

  <div class="app-tabs__heading js-tabs__heading"><a href="#asking-for-dates-from-documents-example-html" aria-controls="asking-for-dates-from-documents-example-html" data-track="tab-html">HTML</a></div>

<div class="app-tabs__container js-tabs__container" id="asking-for-dates-from-documents-example-html" role="tabpanel">
  <div class="app-example__code">
    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-form-group&quot;</span>&gt;</span>

<fieldset class="govuk-fieldset" role="group" aria-describedby="passport-issued-hint"> <legend class="govuk-fieldset__legend govuk-fieldset__legend--l"> <h1 class="govuk-fieldset__heading"> When was your passport issued? </h1> </legend> <div id="passport-issued-hint" class="govuk-hint"> For example, 27 3 2007 </div> <div class="govuk-date-input" id="passport-issued"> <div class="govuk-date-input__item"> <div class="govuk-form-group"> <label class="govuk-label govuk-date-input__label" for="passport-issued-day"> Day </label> <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="passport-issued-day" name="passport-issued-day" type="text" inputmode="numeric"> </div> </div> <div class="govuk-date-input__item"> <div class="govuk-form-group"> <label class="govuk-label govuk-date-input__label" for="passport-issued-month"> Month </label> <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="passport-issued-month" name="passport-issued-month" type="text" inputmode="numeric"> </div> </div> <div class="govuk-date-input__item"> <div class="govuk-form-group"> <label class="govuk-label govuk-date-input__label" for="passport-issued-year"> Year </label> <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="passport-issued-year" name="passport-issued-year" type="text" inputmode="numeric"> </div> </div> </div> </fieldset> </div>

  <div class="app-tabs__heading js-tabs__heading"><a class="app-tabs__heading-link" href="#asking-for-dates-from-documents-example-nunjucks" aria-controls="asking-for-dates-from-documents-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></div>
<div class="app-tabs__container js-tabs__container" id="asking-for-dates-from-documents-example-nunjucks" role="tabpanel"><div class="app-example__code">
    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/date-input/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukDateInput %}

{{ govukDateInput({ id: "passport-issued", namePrefix: "passport-issued", fieldset: { legend: { text: "When was your passport issued?", isPageHeading: true, classes: "govuk-fieldset__legend--l" } }, hint: { text: "For example, 27 3 2007" } }) }}