Skip to main content
Hennepin County Design System

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

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.

Open all