Date Picker

The Date Picker allows the user to make a single date selection using a calendar view. It is invoked on :focus of a Text Field.

Web

Appearance & Behavior

  • The currently selected date is given a blue background.
  • When present, Special Dates are indicated in orange. On hover, a Tooltip appears, containing a concise label for the corresponding Special Date. (Please note that the described hover functionality is not implemented in the example below.)
  • Blackout Dates are dates that cannot be selected. They have priority treatment over Special Dates. For example, if a date is both a Special Date and a Blackout Date, it will receive the Blackout Date treatment. Like Special Dates, Blackout Dates may also reveal a Tooltip on hover.

Default Date Picker

DatePickerDefault

Default Date Picker with special date tooltip and blackout days

Date Picker with Year Selection

DatePickerYear

Example of a Date Picker with year selection arrows

Date Range Picker

DatePickerRange

Example of a Date Range Picker

Week Picker

A Week Picker allows the user to select any week from the calendar. The user can select a week by clicking on the calendar popover, by typing in the form field, or by a combination of the two methods above.

Select a Week by Clicking on the Calendar

an example of a week picker to select the payroll period

default / focusĀ / hover on calendar / resolution

Select a Week by Typing

An example of selecting a week by typing in

default / focus / typing / resolution

 

© Intuit 2016 | Terms of use