Skip to main content Skip to list of components
Service phase: Beta

This is a new service – give us your feedback to help improve it.

Components

Date input

Use the date input component to allow the user to enter a date when populating data, such as submitting a record.

Status
Official

Contents

Open this example in new tab

Contents

HTML 

<div class="tna-fieldset tna-fieldset--small-hint">
  <fieldset class="tna-fieldset__inner">
    <legend class="tna-fieldset__legend">
      <span class="tna-fieldset__heading tna-heading-m">
        Enter a start date
      </span>
    </legend>
    <div class="tna-fieldset__body">
      <div class="tna-date-input" id="date">
        <div class="tna-date-input__item tna-date-input__item--day">
          <label for="date-day" class="tna-date-input__item-label">
            Day
          </label>
          <input type="text" id="date-day" value="" name="date-day" class="tna-date-input__item-input" inputmode="numeric">
        </div>
        <div class="tna-date-input__item tna-date-input__item--month">
          <label for="date-month" class="tna-date-input__item-label">
            Month
          </label>
          <input type="text" id="date-month" value="" name="date-month" class="tna-date-input__item-input" inputmode="numeric">
        </div>
        <div class="tna-date-input__item tna-date-input__item--year">
          <label for="date-year" class="tna-date-input__item-label">
            Year
          </label>
          <input type="text" id="date-year" value="" name="date-year" class="tna-date-input__item-input tna-date-input__item-input--wider" inputmode="numeric">
        </div>
      </div>
    </div>
  </fieldset>
</div>

Nunjucks

Nunjucks options
Primary options
Name Type Description
label string

Required.

The label for the date input field.
headingLevel number

The heading level which represents an element from <h1> through to <h6>. Leave blank or set to 0 to use a plain <label> element with no heading.
headingSize string

The physical size of the date input title (xl, l, m, s or xs).

Default value: m
id string

Required.

A unique ID for the date input component.
name string

Required.

The name of the form field.
hint string

An optional hint to display above the form field.
fields array

An array of fields to display. Can be d, m or y. Order is preserved unless progressive is true.
value object

The values of the date fields.

See macro options for value.
error object

If set, the details of any errors.

See macro options for error.
progressive boolean

If true, order the date fields in a year-month-day order and only show the next field when the previous has a valid value.

Default value: false
formItemClasses string

Classes to add to the date input form group.
formItemAttributes object

HTML attributes (for example data attributes) to add to the date input form group.
fieldsetClasses string

Classes to add to the <fieldset> element.
fieldsetAttributes object

HTML attributes (for example data attributes) to add to the <fieldset> element.
classes string

Classes to add to the date input.
attributes object

HTML attributes (for example data attributes) to add to the date input.
Options for value
Name Type Description
day string

The value for the day field.
month string

The value for the month field. Usually a number between 1 and 12, a three character month (jan-dec) or the month name (January-December).
year string

The value for the year field.
Options for error
Name Type Description
text string

Required.

The error text to display.

 
{% from "nationalarchives/components/date-input/macro.njk" import tnaDateInput %}

{{ tnaDateInput({
  label: "Enter a start date",
  id: "date",
  name: "date"
}) }}

Jinja

Important information

This is an experimental feature showing a Jinja2 macro based on the Nunjucks example. Check the converted code for accuracy. 
{% from "components/date-input/macro.html" import tnaDateInput %}

{{ tnaDateInput({
  "label": "Enter a start date",
  "id": "date",
  "name": "date"
}) }}

How it works

The date input component allows a user to enter a date in three separate parts; day, month and year.

When to use this component

Use the date input component when you can validate the date entered and are able to show errors.

You can also use this component to allow users to enter partial dates like a year or a month and a year.

If you are working with a service that has less capacity for errors or has pages that shouldn't show errors such as a search page, use the date search component.

Prefilled

Open this example in new tab

Contents

HTML 

<div class="tna-fieldset tna-fieldset--small-hint">
  <fieldset class="tna-fieldset__inner">
    <legend class="tna-fieldset__legend">
      <span class="tna-fieldset__heading tna-heading-m">
        Enter a start date
      </span>
    </legend>
    <div class="tna-fieldset__body">
      <div class="tna-date-input" id="date">
        <div class="tna-date-input__item tna-date-input__item--day">
          <label for="date-day" class="tna-date-input__item-label">
            Day
          </label>
          <input type="text" id="date-day" value="24" name="date-day" class="tna-date-input__item-input" inputmode="numeric">
        </div>
        <div class="tna-date-input__item tna-date-input__item--month">
          <label for="date-month" class="tna-date-input__item-label">
            Month
          </label>
          <input type="text" id="date-month" value="09" name="date-month" class="tna-date-input__item-input" inputmode="numeric">
        </div>
        <div class="tna-date-input__item tna-date-input__item--year">
          <label for="date-year" class="tna-date-input__item-label">
            Year
          </label>
          <input type="text" id="date-year" value="1986" name="date-year" class="tna-date-input__item-input tna-date-input__item-input--wider" inputmode="numeric">
        </div>
      </div>
    </div>
  </fieldset>
</div>

Nunjucks

Nunjucks options
Primary options
Name Type Description
label string

Required.

The label for the date input field.
headingLevel number

The heading level which represents an element from <h1> through to <h6>. Leave blank or set to 0 to use a plain <label> element with no heading.
headingSize string

The physical size of the date input title (xl, l, m, s or xs).

Default value: m
id string

Required.

A unique ID for the date input component.
name string

Required.

The name of the form field.
hint string

An optional hint to display above the form field.
fields array

An array of fields to display. Can be d, m or y. Order is preserved unless progressive is true.
value object

The values of the date fields.

See macro options for value.
error object

If set, the details of any errors.

See macro options for error.
progressive boolean

If true, order the date fields in a year-month-day order and only show the next field when the previous has a valid value.

Default value: false
formItemClasses string

Classes to add to the date input form group.
formItemAttributes object

HTML attributes (for example data attributes) to add to the date input form group.
fieldsetClasses string

Classes to add to the <fieldset> element.
fieldsetAttributes object

HTML attributes (for example data attributes) to add to the <fieldset> element.
classes string

Classes to add to the date input.
attributes object

HTML attributes (for example data attributes) to add to the date input.
Options for value
Name Type Description
day string

The value for the day field.
month string

The value for the month field. Usually a number between 1 and 12, a three character month (jan-dec) or the month name (January-December).
year string

The value for the year field.
Options for error
Name Type Description
text string

Required.

The error text to display.

 
{% from "nationalarchives/components/date-input/macro.njk" import tnaDateInput %}

{{ tnaDateInput({
  label: "Enter a start date",
  id: "date",
  name: "date",
  value: {
    day: "24",
    month: "09",
    year: "1986"
  }
}) }}

Jinja

Important information

This is an experimental feature showing a Jinja2 macro based on the Nunjucks example. Check the converted code for accuracy. 
{% from "components/date-input/macro.html" import tnaDateInput %}

{{ tnaDateInput({
  "label": "Enter a start date",
  "id": "date",
  "name": "date",
  "value": {
    "day": "24",
    "month": "09",
    "year": "1986"
  }
}) }}

Hint

Open this example in new tab

Contents

HTML 

<div class="tna-fieldset tna-fieldset--small-hint">
  <fieldset class="tna-fieldset__inner" aria-describedby="date-hint">
    <legend class="tna-fieldset__legend">
      <span class="tna-fieldset__heading tna-heading-m">
        Enter a start date
      </span>
    </legend>
    <p id="date-hint" class="tna-fieldset__hint">
      The earliest date of the record
    </p>
    <div class="tna-fieldset__body">
      <div class="tna-date-input" id="date">
        <div class="tna-date-input__item tna-date-input__item--day">
          <label for="date-day" class="tna-date-input__item-label">
            Day
          </label>
          <input type="text" id="date-day" value="" name="date-day" class="tna-date-input__item-input" inputmode="numeric">
        </div>
        <div class="tna-date-input__item tna-date-input__item--month">
          <label for="date-month" class="tna-date-input__item-label">
            Month
          </label>
          <input type="text" id="date-month" value="" name="date-month" class="tna-date-input__item-input" inputmode="numeric">
        </div>
        <div class="tna-date-input__item tna-date-input__item--year">
          <label for="date-year" class="tna-date-input__item-label">
            Year
          </label>
          <input type="text" id="date-year" value="" name="date-year" class="tna-date-input__item-input tna-date-input__item-input--wider" inputmode="numeric">
        </div>
      </div>
    </div>
  </fieldset>
</div>

Nunjucks

Nunjucks options
Primary options
Name Type Description
label string

Required.

The label for the date input field.
headingLevel number

The heading level which represents an element from <h1> through to <h6>. Leave blank or set to 0 to use a plain <label> element with no heading.
headingSize string

The physical size of the date input title (xl, l, m, s or xs).

Default value: m
id string

Required.

A unique ID for the date input component.
name string

Required.

The name of the form field.
hint string

An optional hint to display above the form field.
fields array

An array of fields to display. Can be d, m or y. Order is preserved unless progressive is true.
value object

The values of the date fields.

See macro options for value.
error object

If set, the details of any errors.

See macro options for error.
progressive boolean

If true, order the date fields in a year-month-day order and only show the next field when the previous has a valid value.

Default value: false
formItemClasses string

Classes to add to the date input form group.
formItemAttributes object

HTML attributes (for example data attributes) to add to the date input form group.
fieldsetClasses string

Classes to add to the <fieldset> element.
fieldsetAttributes object

HTML attributes (for example data attributes) to add to the <fieldset> element.
classes string

Classes to add to the date input.
attributes object

HTML attributes (for example data attributes) to add to the date input.
Options for value
Name Type Description
day string

The value for the day field.
month string

The value for the month field. Usually a number between 1 and 12, a three character month (jan-dec) or the month name (January-December).
year string

The value for the year field.
Options for error
Name Type Description
text string

Required.

The error text to display.

 
{% from "nationalarchives/components/date-input/macro.njk" import tnaDateInput %}

{{ tnaDateInput({
  label: "Enter a start date",
  id: "date",
  name: "date",
  hint: "The earliest date of the record"
}) }}

Jinja

Important information

This is an experimental feature showing a Jinja2 macro based on the Nunjucks example. Check the converted code for accuracy. 
{% from "components/date-input/macro.html" import tnaDateInput %}

{{ tnaDateInput({
  "label": "Enter a start date",
  "id": "date",
  "name": "date",
  "hint": "The earliest date of the record"
}) }}

Error

Open this example in new tab

Contents

HTML 

<div class="tna-fieldset tna-fieldset--small-hint tna-fieldset--error">
  <fieldset class="tna-fieldset__inner" aria-describedby="date-error">
    <legend class="tna-fieldset__legend">
      <span class="tna-fieldset__heading tna-heading-m">
        Enter a start date
      </span>
    </legend>
    <p id="date-error" class="tna-fieldset__error">
      <span class="tna-visually-hidden">Error:</span> Date is not valid
    </p>
    <div class="tna-fieldset__body">
      <div class="tna-date-input" id="date">
        <div class="tna-date-input__item tna-date-input__item--day">
          <label for="date-day" class="tna-date-input__item-label">
            Day
          </label>
          <input type="text" id="date-day" value="" name="date-day" class="tna-date-input__item-input" inputmode="numeric">
        </div>
        <div class="tna-date-input__item tna-date-input__item--month">
          <label for="date-month" class="tna-date-input__item-label">
            Month
          </label>
          <input type="text" id="date-month" value="" name="date-month" class="tna-date-input__item-input" inputmode="numeric">
        </div>
        <div class="tna-date-input__item tna-date-input__item--year">
          <label for="date-year" class="tna-date-input__item-label">
            Year
          </label>
          <input type="text" id="date-year" value="" name="date-year" class="tna-date-input__item-input tna-date-input__item-input--wider" inputmode="numeric">
        </div>
      </div>
    </div>
  </fieldset>
</div>

Nunjucks

Nunjucks options
Primary options
Name Type Description
label string

Required.

The label for the date input field.
headingLevel number

The heading level which represents an element from <h1> through to <h6>. Leave blank or set to 0 to use a plain <label> element with no heading.
headingSize string

The physical size of the date input title (xl, l, m, s or xs).

Default value: m
id string

Required.

A unique ID for the date input component.
name string

Required.

The name of the form field.
hint string

An optional hint to display above the form field.
fields array

An array of fields to display. Can be d, m or y. Order is preserved unless progressive is true.
value object

The values of the date fields.

See macro options for value.
error object

If set, the details of any errors.

See macro options for error.
progressive boolean

If true, order the date fields in a year-month-day order and only show the next field when the previous has a valid value.

Default value: false
formItemClasses string

Classes to add to the date input form group.
formItemAttributes object

HTML attributes (for example data attributes) to add to the date input form group.
fieldsetClasses string

Classes to add to the <fieldset> element.
fieldsetAttributes object

HTML attributes (for example data attributes) to add to the <fieldset> element.
classes string

Classes to add to the date input.
attributes object

HTML attributes (for example data attributes) to add to the date input.
Options for value
Name Type Description
day string

The value for the day field.
month string

The value for the month field. Usually a number between 1 and 12, a three character month (jan-dec) or the month name (January-December).
year string

The value for the year field.
Options for error
Name Type Description
text string

Required.

The error text to display.

 
{% from "nationalarchives/components/date-input/macro.njk" import tnaDateInput %}

{{ tnaDateInput({
  label: "Enter a start date",
  id: "date",
  name: "date",
  error: {
    text: "Date is not valid"
  }
}) }}

Jinja

Important information

This is an experimental feature showing a Jinja2 macro based on the Nunjucks example. Check the converted code for accuracy. 
{% from "components/date-input/macro.html" import tnaDateInput %}

{{ tnaDateInput({
  "label": "Enter a start date",
  "id": "date",
  "name": "date",
  "error": {
    "text": "Date is not valid"
  }
}) }}

Progressive

Important information

The progressive variation of the date input component is still an experimental feature.

Open this example in new tab

Contents

HTML 

<div class="tna-fieldset tna-fieldset--small-hint">
  <fieldset class="tna-fieldset__inner" aria-describedby="date-hint">
    <legend class="tna-fieldset__legend">
      <span class="tna-fieldset__heading tna-heading-m">
        Search for a start date
      </span>
    </legend>
    <p id="date-hint" class="tna-fieldset__hint">
      Enter a year, year and month, or full date
    </p>
    <div class="tna-fieldset__body">
      <div class="tna-date-input" id="date" data-module="tna-date-input-progressive">
        <div class="tna-date-input__item tna-date-input__item--year">
          <label for="date-year" class="tna-date-input__item-label">
            Year
          </label>
          <input type="text" id="date-year" value="" name="date-year" class="tna-date-input__item-input tna-date-input__item-input--wider" inputmode="numeric">
        </div>
        <div class="tna-date-input__item tna-date-input__item--month">
          <label for="date-month" class="tna-date-input__item-label">
            Month
          </label>
          <input type="text" id="date-month" value="" name="date-month" class="tna-date-input__item-input" inputmode="numeric">
        </div>
        <div class="tna-date-input__item tna-date-input__item--day">
          <label for="date-day" class="tna-date-input__item-label">
            Day
          </label>
          <input type="text" id="date-day" value="" name="date-day" class="tna-date-input__item-input" inputmode="numeric">
        </div>
      </div>
    </div>
  </fieldset>
</div>

Nunjucks

Nunjucks options
Primary options
Name Type Description
label string

Required.

The label for the date input field.
headingLevel number

The heading level which represents an element from <h1> through to <h6>. Leave blank or set to 0 to use a plain <label> element with no heading.
headingSize string

The physical size of the date input title (xl, l, m, s or xs).

Default value: m
id string

Required.

A unique ID for the date input component.
name string

Required.

The name of the form field.
hint string

An optional hint to display above the form field.
fields array

An array of fields to display. Can be d, m or y. Order is preserved unless progressive is true.
value object

The values of the date fields.

See macro options for value.
error object

If set, the details of any errors.

See macro options for error.
progressive boolean

If true, order the date fields in a year-month-day order and only show the next field when the previous has a valid value.

Default value: false
formItemClasses string

Classes to add to the date input form group.
formItemAttributes object

HTML attributes (for example data attributes) to add to the date input form group.
fieldsetClasses string

Classes to add to the <fieldset> element.
fieldsetAttributes object

HTML attributes (for example data attributes) to add to the <fieldset> element.
classes string

Classes to add to the date input.
attributes object

HTML attributes (for example data attributes) to add to the date input.
Options for value
Name Type Description
day string

The value for the day field.
month string

The value for the month field. Usually a number between 1 and 12, a three character month (jan-dec) or the month name (January-December).
year string

The value for the year field.
Options for error
Name Type Description
text string

Required.

The error text to display.

 
{% from "nationalarchives/components/date-input/macro.njk" import tnaDateInput %}

{{ tnaDateInput({
  label: "Search for a start date",
  id: "date",
  name: "date",
  hint: "Enter a year, year and month, or full date",
  progressive: true
}) }}

Jinja

Important information

This is an experimental feature showing a Jinja2 macro based on the Nunjucks example. Check the converted code for accuracy. 
{% from "components/date-input/macro.html" import tnaDateInput %}

{{ tnaDateInput({
  "label": "Search for a start date",
  "id": "date",
  "name": "date",
  "hint": "Enter a year, year and month, or full date",
  "progressive": True
}) }}

Something not right?

We are working to improve this service and appreciate your input.

Report a problem Provide feedback Suggest an edit