Date

Examples

    <label class="form-label" for="dateInput">Date of Birth</label>
    <span class="form-text">E.g 01 June 1980</span>
    <input class="form-control" type="text" id="dateInput" autocomplete="on" />

<div class="sgds row">
    <div class="col">
      <label class="form-label" for="day">DD</label>
      <input class="form-control" type="text" inputmode="numeric" pattern="[0-9]*" id="day" autocomplete="on" maxlength="2" onkeypress="return onlyNumberKey(event)" />
    </div>
    <div class="col">
      <label class="form-label" for="month">MM</label>
      <input class="form-control" type="text" inputmode="numeric" pattern="[0-9]*" id="month" autocomplete="on" maxlength="2" onkeypress="return onlyNumberKey(event)"/>
    </div>
     <div class="col">
      <label class="form-label" for="year">YYYY</label>
      <input class="form-control" type="text" inputmode="numeric" pattern="[0-9]*" id="year" autocomplete="on" maxlength="4" onkeypress="return onlyNumberKey(event)"/>
    </div>
</div>

Usage guidelines

• When you require users to fill in dates for your services
  • State clearly how the data should be filled (e.g. Day Month Year).
  • Give an example of how the date should be filled in (e.g. 01 01 2020 vs 1 1 2020) when using a single form input.
• When requesting users to fill in memorable dates
  • For example, asking for a Date-Of-Birth means you should always have the autocomplete attribute for these 3 fields, bday-day, bday-month and bday-year to bring convenience to users.
  • You will need to include the autocomplete attribute to meet WCAG 2.1 AA for production.

• If you need users to select from a few specific dates, we recommend that you use the radio button component to allow them to choose easily. Alternatively, you may use the date picker component for users to select dates.

Usability guidelines

When asking for official document dates
Ensure that the format matches that of the document date that you are requesting for. E.g DD/MMM/YYYY or DD/MM/YY. Do also indicate in the hint text the format of the date, this will help reduce mistakes when filling up the form

Helping users pick a date
You can use the date picker component to help users pick a date for an appointment for example. However, do use this only if:

• Users need to pick a date in the near future or past. E.g. do not use the date picker component when asking for birthdays, this adds complexity to the task. Do use the single form field date pattern instead
• Users need to see other dates in relation to the date they want

Default to current date and month
Do default the date picker component to the current date and month so that users have a starting point when selecting a date