Date picker
Under review
We are in the process of reviewing this component, content, or guidance to make improvements
The date picker component allows users to input a date or date range from the past, present, or future. It’s used most often in forms. A user can either enter the date themselves, or they can use the calendar view to look up their date.
When to use
Use the date picker’s calendar view to:
- Give a range of dates
- Provide a visual guide for picking a date for the near future or from the recent past
- Let users pick day of the week, week of the month, and date
- Offer the ability to see dates in relation to each other
When not to use
It’s not necessary to use the calendar view when asking users to pick a date familiar to them. For example, don’t use calendar view when asking for someone’s birthday.
Open all
Open all
If the date picker is the only task on a page:
Use a heading level for the content that appears before the date picker fields. For example: "What is your birthday."
- The heading level most likely will be an
<H1>or<H2>. - Include the heading and content within the
<legend>element.
Use accurate for and id attributes:
- For example,
<label for="short description of data collected">and<input id="same short description of data collected">
Avoid using the type="number" attribute:
- Dragon Naturally Speaking cannot read it aloud or select it.
- The attribute reads as unlabeled on some screen readers.
- It renders as a spin button when using NVDA's object navigation.
- NVDA+tab reports it as an unlabeled field.
Avoid placeholder text:
- It disappears when a user tabs into the text field. This removes the guidance of the placeholder text.
- It can cause users to assume information is prepopulated.
- Instead, use a hint or example above the select element and input fields and below the
<legend>element.
To increase clarity and reduce user error:
- Clearly label each field.
- Match the hint example to the format of your date picker.
- Use back-end validation to check for correct date input.