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. |
API reference
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
| activeDate | Specifies the component's active date. | Date | ||
| activeRange | active-range | When range is true, specifies the active range. Where "start" specifies the starting range date and "end" the ending range date. | "end" | "start" | |
| calendars | calendars | Specifies the number of calendars displayed when range is true. | 1 | 2 | 2 |
| headingLevel | heading-level | Specifies the heading level of the component's heading for proper document structure, without affecting visual styling. | 1 | 2 | 3 | 4 | 5 | 6 | |
| layout | layout | Defines the layout of the component. | "horizontal" | "vertical" | "horizontal" |
| max | max | When the component resides in a form,
specifies the latest allowed date ("yyyy-mm-dd"). | string | |
| maxAsDate | Specifies the latest allowed date as a full date object (new Date("yyyy-mm-dd")). | Date | ||
| messageOverrides | Use this property to override individual strings used by the component. | Record<string, unknown> | ||
| min | min | When the component resides in a form,
specifies the earliest allowed date ("yyyy-mm-dd"). | string | |
| minAsDate | Specifies the earliest allowed date as a full date object (new Date("yyyy-mm-dd")). | Date | ||
| monthStyle | month-style | Specifies the monthStyle used by the component. | "abbreviated" | "wide" | "wide" |
| numberingSystem | numbering-system | Specifies the Unicode numeral system used by the component for localization. This property cannot be dynamically changed. | "arab" | "arabext" | "latn" | |
| proximitySelectionDisabled | proximity-selection-disabled | When present, disables the default behavior on the third click of narrowing or extending the range and instead starts a new range. | boolean | false |
| range | range | When present, activates the component's range mode to allow a start and end date. | boolean | false |
| scale | scale | Specifies the size of the component. | "l" | "m" | "s" | "m" |
| value | value | Specifies the selected date as a string ("yyyy-mm-dd"), or an array of strings for range values (["yyyy-mm-dd", "yyyy-mm-dd"]). | Array<string> | string | |
| valueAsDate | Specifies the selected date as a full date object (new Date("yyyy-mm-dd")), or an array containing full date objects ([new Date("yyyy-mm-dd"), new Date("yyyy-mm-dd")]). | Array<Date> | Date |
Styles
| Name | Description |
|---|---|
| --calcite-date-picker-border-color | Specifies the component's border color. |
| --calcite-date-picker-corner-radius | Specifies the component's border radius. |
| --calcite-date-picker-range-calendar-divider-color | Specifies the divider color between calendar's when range="true". |
| --calcite-date-picker-week-header-text-color | Specifies the week header text color. |
| --calcite-date-picker-header-action-background-color | Specifies the background color of header action's of the component. |
| --calcite-date-picker-header-action-background-color-hover | Specifies the background color of header action's of the component when hovered. |
| --calcite-date-picker-header-action-background-color-press | Specifies the background color of header action's of the component when pressed. |
| --calcite-date-picker-header-action-text-color | Specifies the text color of header action's of the component. |
| --calcite-date-picker-header-action-text-color-press | Specifies the text color of header action's of the component when pressed. |
| --calcite-date-picker-year-text-color | Specifies the text color of year & suffix of the component. |
| --calcite-date-picker-month-select-font-size | Specifies the font size of month select of the component. |
| --calcite-date-picker-month-select-text-color | Specifies the text color of month select of the component. |
| --calcite-date-picker-month-select-icon-color | Specifies the icon color of month select of the component. |
| --calcite-date-picker-month-select-icon-color-hover | Specifies the icon color of month select of the component when hovered. |
| --calcite-date-picker-day-background-color | Specifies the background color of day of the component. |
| --calcite-date-picker-day-background-color-hover | Specifies the background color of day of the component when hovered. |
| --calcite-date-picker-day-text-color | Specifies the text color of day of the component. |
| --calcite-date-picker-day-text-color-hover | Specifies the text color of day of the component when hovered. |
| --calcite-date-picker-current-day-text-color | Specifies the text color of current day of the component. |
| --calcite-date-picker-day-background-color-selected | Specifies the background color of selected day of the component. |
| --calcite-date-picker-day-text-color-selected | Specifies the text color of selected day of the component. |
| --calcite-date-picker-day-range-text-color | Specifies the text color of select day range of the component. |
| --calcite-date-picker-day-range-background-color | Specifies the background color of select day range of the component. |
| --calcite-date-picker-day-outside-range-background-color-hover | Specifies the background color of day's outside current range when hovered. |
| --calcite-date-picker-day-outside-range-text-color-hover | Specifies the text color of day's outside current range when hovered. |
Events
| Name | Description | Behavior |
|---|---|---|
| calciteDatePickerChange | Fires when a user changes the component's date. For range events, use calciteDatePickerRangeChange. | |
| calciteDatePickerRangeChange | Fires when a user changes the component's date range. For components without range use calciteDatePickerChange. |
Methods
| Name | Description | Signature |
|---|---|---|
| componentOnReady | Create a promise that resolves once component is fully loaded. | componentOnReady(): Promise<void> |
| setFocus | Sets focus on the component's first focusable element. | setFocus(options?: FocusOptions): Promise<void> |