Date Pickers

The Date picker lets users pick single dates or a range of dates. This guide explains how to use them.

Date Pickers
  • Usage
  • Examples
  • Related component
  • Download


Date pickers can be used whenever users need to input specific dates like delivery dates . Keep in mind that  the date range is limited (in both directions, past and future), otherwise users will have a hard time clicking their way through to their desired date. For example, use date pickers for picking a package delivery date, but not for selecting birth dates. For mobile interfaces, use the native date picker of the OS.

In collapsed state, date pickers show either an empty field, a placeholder or a (pre-) selected date. To inform users about the expected date formatting, form field descriptions can serve as a more persistently visible alternative to placeholders. In expanded state, date pickers show a navigatable calendar, where users can select a single date or a range of date. The selection is highlighted in red, while the current date is circled in black. Unavailable days are grayed out. Additional buttons can serve as shortcuts to jump to commonly used points in time.


Date picker for selecting a single date.


Date picker for selecting a range of dates.



Related component


If you download any document, you accept our Terms and Conditions.

Sketch UI Library
85.98 MB