Skip to main content

Your privacy settings

We use cookies to help you with journey planning and relevant disruptions, remember your login and show you content you might be interested in. If you’re happy with the use of cookies by West Midlands Combined Authority and our selected partners, click ‘Accept all cookies’. Or click ‘Manage cookies’ to learn more.

Manage Cookies
Beta

This is a new service - your feedback will help us to improve it.

Components

Date Input

About

What does it do?

  • Help users enter a memorable date or one they can easily look up.

When to use it?

  • Use the date input component when you’re asking users for a date they’ll already know, or can look up without using a calendar.

When not to use it?

  • Do not use the date input component if users are unlikely to know the exact date of the event you’re asking about.
If you are looking for how to format the date within content i.e. "4 June 2017", check the dates section within the A to Z content style guide.
HTML markup
<div id="date-input" class="wmnds-fe-group">
  <div class="wmnds-fe-date-input">
    <div class="wmnds-fe-date-input__day">
      <label class="wmnds-fe-label" for="LastUsedDateDay">Day</label>
      <input autocomplete="day" class="wmnds-fe-input " id="date-input_LastUsedDateDay" inputmode="numeric" name="date-input" type="text" value="" maxLength="2" pattern="[0-9]*">
    </div>
    <div class="wmnds-fe-date-input__month">
      <label class="wmnds-fe-label" for="LastUsedDateMonth">Month</label>
      <input autocomplete="month" class="wmnds-fe-input " id="date-input_LastUsedDateMonth" inputmode="numeric" name="date-input" type="text" value="" maxLength="2" pattern="[0-9]*">
    </div>
    <div class="wmnds-fe-date-input__year">
      <label class="wmnds-fe-label" for="LastUsedDateYear">Year</label>
      <input autocomplete="year" class="wmnds-fe-input " id="date-input_LastUsedDateYear" inputmode="numeric" name="date-input" type="text" value="" maxLength="4" pattern="[0-9]*">
    </div>
  </div>
</div>
Nunjucks markup
{% from "wmnds/components/form-elements/date-input/_date-input.njk" import wmndsDateInput %}

{{
   wmndsDateInput({
      id: "passport-date",
      required: true,
      error: false, 
      errorMessage: {
         id: null,
         contextText: "The date your passport was issued must be in the past",
         contextHTML: null,
         classes: null
      },
      formGroup: {
         classes: "wmnds-m-t-20"
      }
    })
}}
Nunjucks properties
NameTypeDescription
idstringRequired. Must be unique. The id of the group of inputs.
requiredbooleanIf true, input is required/must be filled out. Defaults to false.
errorbooleanIf true, error will be displayed. Defaults to false.
errorMessageobjectOptions for the error message component. See errorMessage.
formGroupobjectOptions for the form-group wrapper. See formGroup below.

Options for errorMessage

NameTypeDescription
idstringId attribute to add to the error message span tag.
contentTextstringRequired. Text to use within the error message. If contentHTML is supplied, this is ignored.
contentHTMLstringRequired. HTML to use within the error message
classesstringClasses to add to the error message span tag.

Options for formGroup

NameTypeDescription
classesstringClasses to add to the form group (e.g. to show error state for the whole group)

Date input with error

Date input custom error message
HTML markup
<div id="error-date" class="wmnds-fe-group wmnds-fe-group--error">
  <div class="wmnds-fe-date-input">
    <span class="wmnds-fe-error-message">Date input custom error message</span>
    <div class="wmnds-fe-date-input__day">
      <label class="wmnds-fe-label" for="LastUsedDateDay">Day</label>
      <input autocomplete="day" class="wmnds-fe-input  wmnds-fe-input--error" id="error-date_LastUsedDateDay" inputmode="numeric" name="error-date" type="text" value="" maxLength="2" pattern="[0-9]*">
    </div>
    <div class="wmnds-fe-date-input__month">
      <label class="wmnds-fe-label" for="LastUsedDateMonth">Month</label>
      <input autocomplete="month" class="wmnds-fe-input  wmnds-fe-input--error" id="error-date_LastUsedDateMonth" inputmode="numeric" name="error-date" type="text" value="" maxLength="2" pattern="[0-9]*">
    </div>
    <div class="wmnds-fe-date-input__year">
      <label class="wmnds-fe-label" for="LastUsedDateYear">Year</label>
      <input autocomplete="year" class="wmnds-fe-input  wmnds-fe-input--error" id="error-date_LastUsedDateYear" inputmode="numeric" name="error-date" type="text" value="" maxLength="4" pattern="[0-9]*">
    </div>
  </div>
</div>
Nunjucks markup
{% from "wmnds/components/form-elements/date-input/_date-input.njk" import wmndsDateInput %}

{{
   wmndsDateInput({
      id: "passport-date",
      required: true,
      error: false, 
      errorMessage: {
         id: null,
         contextText: "The date your passport was issued must be in the past",
         contextHTML: null,
         classes: null
      },
      formGroup: {
         classes: "wmnds-m-t-20"
      }
    })
}}
Nunjucks properties
NameTypeDescription
idstringRequired. Must be unique. The id of the group of inputs.
requiredbooleanIf true, input is required/must be filled out. Defaults to false.
errorbooleanIf true, error will be displayed. Defaults to false.
errorMessageobjectOptions for the error message component. See errorMessage.
formGroupobjectOptions for the form-group wrapper. See formGroup below.

Options for errorMessage

NameTypeDescription
idstringId attribute to add to the error message span tag.
contentTextstringRequired. Text to use within the error message. If contentHTML is supplied, this is ignored.
contentHTMLstringRequired. HTML to use within the error message
classesstringClasses to add to the error message span tag.

Options for formGroup

NameTypeDescription
classesstringClasses to add to the form group (e.g. to show error state for the whole group)