Datepicker

Overview

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.

Editorial

• 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.

Examples

Single date picker

Open in Storybook

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

Behaviour

• 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.

Accessibility

• Always give an option to enter the date using a text field component.
• See date formatting guidelines