Date

Use this pattern when you want to ask users for a specific date, e.g. their date of birth or when something was issued to them.

Examples

Single Date Input

E.g 01 June 1980

 
<div class="sgds form-group">
    <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>

                

Isolated Date Input

 
<div class="sgds row">
    <div class="col form-group">
      <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 form-group">
      <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 form-group">
      <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

Date pattern should be used:
  • 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.
Date pattern should not be used:
  • 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

Home


Previous version 2.0.0