# Pickers {% embed url="" %}

## Usage Date pickers let users select a date or range of dates. They should be suitable for the context in which they appear. Date pickers can be embedded into: * Dialogs on mobile * Text field dropdowns on desktop ### Principles #### Relevant Date pickers can display past, present, or future dates – as relevant to the task. #### Clear Clearly indicate important dates, such as current and selected days. #### Intuitive To ensure picking a day or time is intuitive, use common picker patterns, such as a calendar. ## Anatomy ### Mobile calendar date picker 1. Title 2. Selected date 3. Switch-to-keyboard input icon 4. Year selection menu 5. Month pagination 6. Current date 7. Selected date

### Mobile date range picker 1. Title 2. Selected date range 3. Switch to keyboard input icon 4. Month and year label 5. Current date 6. Start date 7. Selected range 8. End date

### Mobile input picker 1. Title 2. Selected date 3. Switch-to-calendar view icon 4. Text field ![](https://storage.googleapis.com/spec-host-backup/mio-components%2Fassets%2F1iy-JbcnYcWwoeTu7l3nlR9frsKSJ_qiS%2Fpicker-elements-input.png) ### Desktop date picker 1. Text field 2. Year and month selection 3. Month pagination 4. Today’s date 5. Selected day 6. Hover state ![](https://storage.googleapis.com/spec-host-backup/mio-components%2Fassets%2F0B54x0KDcs5U-d0dJMFg2OTdGWjg%2Fpicker-elements-desktop.png) ### ## Mobile pickers ### Mobile calendar pickers #### Usage Mobile calendar pickers can be used to select dates in the near future or past, when it’s useful to see them in a calendar month format. They are displayed in a dialog. Common use cases include: * Making a restaurant reservation * Scheduling a meeting They aren’t ideal for selecting dates in the distant past or future that require more navigation, such as entering a birth date or expiration date. Mobile calendar pickers allow selection of a single date and year.

【Do】Maintain 16dp left and right padding from the edge of the screen. The top and bottom of the picker should be vertically centered in the screen.

【Don’t】Don’t use more than 16dp from the left and right screen edges, as it creates smaller touch targets.

【Don’t】Don’t use a calendar picker to prompt for dates in the distant past or future, such as a date of birth. In these cases, use a mobile input picker or a text field instead.

#### Behavior Mobile calendar pickers navigate across dates in several ways: * To navigate across months, swipe horizontally * To navigate across years, scroll vertically * To access the year picker, tap the year {% embed url="" %} Horizontal swiping lets the user navigate across months. {% endembed %} {% embed url="" %} Tapping the year menu accesses the year picker. Scrolling vertically navigates across years. {% endembed %}

Mobile calendar pickers adapt to a device’s orientation.

### Mobile date range pickers #### Usage Mobile date range pickers allow selection of a range of dates. They cover the entire screen. Common use cases include: * Booking a flight * Reserving a hotel

#### Behavior Mobile date range pickers navigate across dates in several ways: * To select a range of dates, tap the start and end dates on the calendar * To navigate across months, scroll vertically {% embed url="" %} Select a range of dates with the date range picker. {% endembed %} {% embed url="" %} Scroll vertically to access different months. {% endembed %} ### Mobile date input pickers #### Usage Mobile date input pickers allow the manual entry of dates using the numbers on a keyboard. Users can input a date or a range of dates in a dialog. #### Mobile date input picker Mobile date input pickers allow for keyboard input to select a date or range of dates.

【Do】For dates that don’t require a calendar view, make the mobile date input picker as the default prompt.

【Do】Alternatively, a text field with appropriate hint text can prompt for dates, such as in a form.

### #### Behavior The mobile date input picker can be accessed from any other mobile date picker, via the edit icon. {% embed url="" %} Switching from a mobile calendar picker to a mobile date input picker {% endembed %} {% embed url="" %} Switching from a mobile date range picker to a mobile date input picker {% endembed %} ## Desktop pickers ### Desktop date pickers #### Usage Desktop date pickers allow the selection of a specific date and year. The desktop date picker displays a date input field by default, and a dropdown calendar appears when the user taps on the input field. The user can interact with either form of date entry. Desktop date pickers are ideal for navigating dates in both the near future (or past) and the distant future (or past), as they provide multiple ways to select dates.

### Behavior Users can input dates either using a keyboard or by navigating the calendar UI; both options are immediately available when the desktop date picker is accessed.

{% embed url="" %} Navigate through months by tapping the back and next arrows. {% endembed %} {% embed url="" %} Navigate through years by tapping the dropdown. {% endembed %} ### Desktop date range pickers Desktop date range pickers allow a range of days to be selected. They display both calendar and date input fields. {% embed url="" %} Desktop date range pickers select ranges of dates. The text field reflects the calendar dates selected. {% endembed %}

{% embed url="" %} 【Do】Use hover states to preview a user’s selection. {% endembed %} {% embed url="" %} 【Don’t】Don’t use the same style for hover and selected states. {% endembed %} Tooltips can help explain how to use date picker controls. 1. Tooltip used on month and year selector 2. Tooltip on day selector 3. Tooltip used on month pagination control 4. Tooltip used on selected date ![](https://storage.googleapis.com/spec-host-backup/mio-components%2Fassets%2F0B54x0KDcs5U-VkN4TG9Mdk9PRWc%2Fpicker-desktop-tooltips.png)