Overview

A Date Picker is an input that is used when a user has to select a date or date range from a calendar interface.

Anatomy

Single Selection Date Picker

Single Selection Date Pickers are most often used for use cases that require a single date selection. It is designed to be more compact than our Multi-Range Date Picker and does not support range selection. The dropdown should automatically close after a date is selected.

Multi-Range Date Picker

Multi-Range Date Pickers should be used when a user needs to make a date range selection. It is designed to show two months at a time and supports range selection. The component also has an optional Quick Range section that can be added or removed depending on the use case. Multi-Range Date Picker dropdowns should not automatically close when a range is selected - users should click apply, or outside of the dropdown to dismiss the calendar.

Note: This variant is not yet available in React, but will be built out during the next quarter. Keep an eye out for its release!

Basic Usage

How to use this component

Error Prevention

If a date is not selectable, these days should be disabled and designers should provide a clear reason for why it is unavailable to prevent errors.

Time Zone & Localization

Date Pickers can change depending on the user’s preferred date and time formats. We recommend surfacing the Date Picker’s time zone in the description of the component for transparency of formatting. If possible, we also recommend that designers add a link in the description to navigate the user to a settings page to change their current time zone if desired.

In React, locale formatting of Date Picker is currently supported for: United States, ISO-8601/UTC, and Croatian/United Kingdom formats.

Filtering with Date & Range Pickers

Date and Range Pickers can be used alongside other components such as Selects to create complex filtering patterns.