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.