Date pickers let users choose a date, or a range of dates from a calendar or from a preset list. They display both calendar and date input fields.

Global patterns.

Design Guidelines#

Use when#

  • The user needs to input a date that includes a day, month, and year value.

Don't use when#

  • The date does not require either a day, a month, or a year.

Visual Style#

  • Always place icon type="calendar" to the right of the date picker input field.


  • Always format the date as MMM DD, YYYY.
  • Always provide MMM DD, YYYY as placeholder text.
  • Always validate to ensure that the dates entered are valid.


Single date picker#

Preview example in Storybook

  • Use to select a single date.
  • Use to select a date range - one input for a start date, and a second for the end date. They can be stacked or inline depending on the use case.

Code Reference#


  • Users can input dates either using the keyboard or choosing from the calendar; both options are always immediately available.
  • Always close the calendar visual after a date is selected.
  • Always allow users to enter dates in multiple formats; once a date is entered always format the date to MMM DD, YYYY.
  • To navigate across months, click the single arrow.
  • To navigate across years, click the double arrow.
  • To access the year picker, click the year.
  • To access the month picker, click the month.


Last updated on by Diana Thomson