Date input
<gcds-date-input>

Also called: dates, dateinput, date, memorable date.

A date input is a space to enter a known date.

• GitHub
• Figma

Problems date inputs solves

Take a look at what date inputs do to see if they fit the problem you're solving for. Then select the best date input type for the use case you need to meet.

Use a date input to gather a date from a person when you're expecting them to write:

• A date they already know, like their date of birth.
• A date they can easily find, like a health card expiry date.
• A specific date, like the date they moved to a new home.
• A date that doesn’t include the specific day of the week.
• Avoid using a date input for the selection of an unknown date. Use a date picker instead.

Related components

Input when you want someone to input only a year or only a day of the month.

Select when you want someone to input only a month.

Date picker when you want someone to choose a not-yet-known date, like for appointment scheduling.

Component formats

Month, day, year (English only)

• A specific date the person will know or can easily find.
• Used in English for written dates.

Day, month, year (French only)

• A specific date the person will know or can easily find.
• Used in French for written dates.

Year, month, day

• A specific date the person will know or can easily find.
• Used internationally for numeric dates.

Month, year

• For an approximate date.