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.
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
Date Picker with Year Selection
Date Range 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
Select a Week by Typing