Datepicker
beta

The Datepicker is a tool for picking dates and displaying date selections. It consists of two parts:

  1. a text field for inputing dates
  2. a calendar for displaying selected dates and making visual date selections

The following examples are for visual reference only.

If you would like to see a working example, head to the Datepicker component documentation

Use the Date Range Picker when you need to select multiple dates.

Press the down arrow key to interact with the calendar and select a date. Press the question mark key to get the keyboard shortcuts for changing dates.

Press the down arrow key to interact with the calendar and select a date. Press the question mark key to get the keyboard shortcuts for changing dates.

chevron_left
chevron_right
September 2018
October 2018
November 2018
December 2018

Use the Single Date Picker when you only need to select a single date.

Press the down arrow key to interact with the calendar and select a date. Press the question mark key to get the keyboard shortcuts for changing dates.

chevron_left
chevron_right
October 2018
November 2018
December 2018
January 2019

The Date Picker Range Controller is a Datepicker calendar without a date input field. Use this to display a calendar that has preset date selections.

chevron_left
chevron_right
September 2018
October 2018
November 2018
December 2018

When implementing a Datepicker, you've also got options for displaying calendar dates themselves in different states.

In the following example, November 1-10 are out of range.

Use this display state for past calendar dates, dates where a particular action cannot be performed, or other out of scope dates.

chevron_left
chevron_right
October 2018
November 2018
December 2018