Date Picker is a calendar component used for choosing a day of a month.
Overview
Date Picker can be used to pick a day or range of days that will autofill an input. Date Picker is designed to work within a dropdown or statically within the interface.
Usage
- Choosing a day
- Choosing a range of days
Sample
Accessibility
Keyboard navigation
| Key | Function |
|---|---|
Space | Selects the focused element. When the date is selected and contained in a parent component, such as calcite-input-date-picker, closes the component. |
Enter | Selects the focused element. When the date is selected and contained in a parent component, such as calcite-input-date-picker, closes the component. |
Tab | Moves focus between the component's elements. When the currently focused step is the date, focus will cycle to the previous month. |
Tab and Shift | Moves focus between the component's elements. When the currently focused step is the previous month, focus will cycle to the date. |
Arrow top | When focused on the year, increases the year value. When focused on the date, moves focus to the previous non-disabled week. |
Arrow bottom | When focused on the year, decreases the year value. When focused on the date, moves focus to the next non-disabled week. |
Arrow left | When focused on the year, moves the cursor to the left. When focused on the date, moves focus to previous non-disabled date. |
Arrow right | When focused on the year, moves the cursor to the right. When focused on the date, moves focus to next non-disabled date. |
Home | When focused on the year, moves the cursor to the first number. When focused on the date, moves focus to the first day of the selected month. |
End | When focused on the year, moves the cursor to the last number. When focused on the date, moves focus to the last day of the selected month. |
Esc | When contained in a parent component, such as calcite-input-date-picker, closes the component. |