Date Input

Date input helps users enter a memorable date. Dates can be presented with or without the day, and the year can be formatted presented in a two or four digit format.

☝️ Research insight: When asking for a date, make the fields match the format of the original. This will make it easier for users to copy it across accurately.

Ie. exactly as it's shown on a passport, credit card or similar item, with the fields matching the format of the original.

Variants

Day month year

Four digit year

Two digit year

Month day year

Four digit year

Two digit year

Month year

Four digit year

Two digit year

Behaviour

Valid

Invalid

Configurations

Description

Custom labels

Editorial

Validation error messages

Date of Birth

  • Date of birth must be in the past
  • Year must be four digits/two digits
  • Month must be two digits
  • Day must be two digits

Expiry date

  • Expiry date must be in the future
  • Year must be two digits
  • Month must be two digits

Implementation

There is no internal state, all validation should be handled externally by using the optional handleDateFieldChange and status props.