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
<calcite-date-picker></calcite-date-picker>
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" | |
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. | {
nextMonth?: string;
prevMonth?: string;
monthMenu?: string;
yearMenu?: string;
year?: string;
} | ||
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 true , 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 true , 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 |
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(): Promise<void> |