Date input

When to use this component

Use the date input component when users need to input a memorable or easily retrievable date. When submitting data to CRM, this component is suitable for date type target fields.

When to not use this component

Avoid using the date input component if users are unlikely to know the precise date of the event in question.

How it works

The date input component comprises three fields allowing users to enter the day, month, and year individually.

Always include hint text within date components to inform users about the required input format. Additional hint text can be added as needed. Ensure that any example dates provided in hint text are relevant to the specific question being asked.

HTML examples

Select the appropriate example from this page and directly integrate the HTML into your web template. You can customise these examples to align with your specific requirements, as indicated below. Refer to the layouts section for further guidance on structuring your web template.

If the component requires submission to a CRM field, ensure to replace the placeholder schema-name text in the HTML example with the actual target field schema name. Retain any prefixed or suffixed text related to the schema name. For instance, if the id attribute reads schema-name-hint in the example, ensure the replacement maintains the -hint suffix (e.g. dfe_field-hint).

This step is crucial for allowing the CRM helper framework to validate and submit data to CRM.

For single question pages

If presenting only one question on the page, designate the contents of the legend as the page heading. This practice ensures users of screen readers hear the contents only once.

You will need to include an empty {% title %} block in your web template to remove the default page header and avoid duplication.

Date input component

What is your date of birth?

For example, 27 3 2021

Replace 'schema-name' in the example by entering the schema name of your target CRM field.

      
      
<div class="govuk-form-group">
  <fieldset class="govuk-fieldset" role="group" aria-describedby="schema-name-hint">
    <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
      <h1 class="govuk-fieldset__heading">
        What is your date of birth?
      </h1>
    </legend>
    <div id="schema-name-hint" class="govuk-hint">
      For example, 27 3 2021
    </div>
    <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="schema-name-day">
            Day
          </label>
          <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="schema-name-day" name="schema-name" 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="schema-name-month">
            Month
          </label>
          <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="schema-name-month" name="schema-name" 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="schema-name-year">
            Year
          </label>
          <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="schema-name-year" name="schema-name" type="text" inputmode="numeric">
        </div>
      </div>
    </div>
  </fieldset>
</div>

      
    

Warning This is a basic web template page layout with a logged in user check and does not include additional liquid items which are common place on a CRM Portal, for example, web role, URL parameter or record checks.

      
      

{% extends 'DfE/Layouts/2ColumnWideLeft' %}

{% block title %}{% endblock %}   

{% block main %}
  {% unless user %}
    <script>
      window.location.href="{{ sitemarkers['DfE/Error/AccessDenied'].url }}"
    </script>
  {% endunless %}

  ## HTML content goes here ##

{% endblock %}


      
    

For multiple question pages

If presenting more than one question on the page, do not set the contents of the <legend> as the page heading.

Card component

What is your date of birth?

For example, 27 3 2021

Replace 'schema-name' in the example by entering the schema name of your target CRM field.

      
      
<div class="govuk-form-group">
  <fieldset class="govuk-fieldset" role="group" aria-describedby="schema-name-hint">
    <legend class="govuk-fieldset__legend">
      What is your date of birth?
    </legend>
    <div id="schema-name-hint" class="govuk-hint">
      For example, 27 3 2021
    </div>
    <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="schema-name-day">
            Day
          </label>
          <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="schema-name-day" name="schema-name" 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="schema-name-month">
            Month
          </label>
          <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="schema-name-month" name="schema-name" 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="schema-name-year">
            Year
          </label>
          <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="schema-name-year" name="schema-name" type="text" inputmode="numeric">
        </div>
      </div>
    </div>
  </fieldset>
</div>

      
    

Warning This is a basic web template page layout with a logged in user check and does not include additional liquid items which are common place on a CRM Portal, for example, web role, URL parameter or record checks.

      
      

{% extends 'DfE/Layouts/2ColumnWideLeft' %} 

{% block main %}
  {% unless user %}
    <script>
      window.location.href="{{ sitemarkers['DfE/Error/AccessDenied'].url }}"
    </script>
  {% endunless %}

  ## HTML content goes here ##

{% endblock %}


      
    

Asking for a date of birth

When collecting a date of birth, apply the autocomplete attribute to the date input component. This enables browsers to autofill the information if previously entered by the user.

Set the autocomplete attribute on the day, month, and year inputs to bday-day, bday-month and bday-year respectively.

Date autocomplete example

Replace 'schema-name' in the example by entering the schema name of your target CRM field.

      
      
<input class="govuk-input govuk-date-input__input govuk-input--width-2" id="schema-name-day" name="schema-name" type="text" autocomplete="bday-day"inputmode="numeric">   

<input class="govuk-input govuk-date-input__input govuk-input--width-2" id="schema-name-month" name="schema-name" type="text" autocomplete="bday-month" inputmode="numeric">       

<input class="govuk-input govuk-date-input__input govuk-input--width-4" id="schema-name-year" name="schema-name" type="text" autocomplete="bday-year" inputmode="numeric">   

      
    

Error messages

An error message is displayed next to the field and in the error summary when a validation error occurs. The CRM helper framework automatically handles error messages for specific error states, therefore you do not need to add any additional error containers to your HTML. Refer to the CRM helper framework guide to understand how to validate your front-end data.

Ensure that your component HTML and your inputs validation JavaScript object are structured correctly for your component type.

Occasionally you may wish to employ error messages outside of the validation process. You can read about the functions available within the CRM helper framework to assist you with this.

If you would like any additional advice or guidance with using these examples on Power Pages, please contact the Solutions Delivery Team.