Input Date Picker contains a calendar component within an input used for choosing a day of a month.
Overview
Input Date Picker is an input-driven component containing the Date Picker.
Usage
- Choosing a day
- Choosing a range of days
Sample
Accessibility
Keyboard navigation
For more detailed keyboard navigation, visit the Date Picker's keyboard navigation.
| Key | Function |
|---|---|
Tab | Moves focus in and out of the component. |
Tab and Shift | Moves focus in and out of the component. |
Arrow down | Opens and shifts focus to the calcite-date-picker component. |
Esc | When the calcite-date-picker component is open, closes the component and shifts focus back to the calcite-input-date-picker. |
API reference
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
| calendars | calendars | Specifies the number of calendars displayed when range is true. | 1 | 2 | 2 |
| disabled | disabled | When true, interaction is prevented and the component is displayed with lower opacity. | boolean | false |
| flipPlacements | Specifies the component's fallback calcite-date-picker placement when it's initial or specified placement has insufficient space available. | Array<"top" | "bottom" | "left" | "right" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end" | "leading-start" | "leading" | "leading-end" | "trailing-end" | "trailing" | "trailing-start"> | ||
| focusTrapDisabled | focus-trap-disabled | When true, prevents focus trapping. | boolean | false |
| form | form | The id of the form that will be associated with the component.
When not set, the component will be associated with its ancestor form element, if any. | string | |
| 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 | |
| label | label | Accessible name for the component. | string | |
| labelText | label-text | When provided, displays label text on the component. | string | |
| 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. | 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. | Date | ||
| monthStyle | month-style | Specifies the monthStyle used by the component. | "abbreviated" | "wide" | "wide" |
| name | name | Specifies the name of the component.
Required to pass the component's value on form submission. | string | |
| numberingSystem | numbering-system | Specifies the Unicode numeral system used by the component for localization. This property cannot be dynamically changed. | "arab" | "arabext" | "latn" | |
| open | open | When true, displays the calcite-date-picker component. | boolean | false |
| overlayPositioning | overlay-positioning | Determines the type of positioning to use for the overlaid content.
Using "absolute" will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.
"fixed" should be used to escape an overflowing parent container, or when the reference element's position CSS property is "fixed". | "absolute" | "fixed" | "absolute" |
| placement | placement | Specifies the placement of the calcite-date-picker relative to the component. | "bottom" | "bottom-end" | "bottom-start" | "top" | "top-end" | "top-start" | "bottom-start" |
| proximitySelectionDisabled | proximity-selection-disabled | When true, disables the default behavior on the third click of narrowing or extending the range.
Instead starts a new range. | boolean | false |
| range | range | When true, activates a range for the component. | boolean | false |
| readOnly | read-only | When true, the component's value can be read, but controls are not accessible and the value cannot be modified. | boolean | false |
| required | required | When true and the component resides in a form,
the component must have a value in order for the form to submit. | boolean | false |
| scale | scale | Specifies the size of the component. | "l" | "m" | "s" | "m" |
| status | status | Specifies the status of the input field, which determines message and icons. | "idle" | "invalid" | "valid" | "idle" |
| validationIcon | validation-icon | Specifies the validation icon to display under the component. | boolean | string | |
| validationMessage | validation-message | Specifies the validation message to display under the component. | string | |
| validity | The current validation state of the component. | {
valid: boolean;
badInput: boolean;
customError: boolean;
patternMismatch: boolean;
rangeOverflow: boolean;
rangeUnderflow: boolean;
stepMismatch: boolean;
tooLong: boolean;
tooShort: boolean;
typeMismatch: boolean;
valueMissing: boolean;
} | ||
| value | value | Selected date as a string in ISO format ("yyyy-mm-dd"). | Array<string> | string | |
| valueAsDate | The component's value as a full date object. | Array<Date> | Date |
Slots
| Name | Description |
|---|---|
| label-content | A slot for rendering content next to the component's labelText. |
Styles
| Name | Description |
|---|---|
| --calcite-input-date-picker-actions-icon-color | Specifies the component's actions icon color. |
| --calcite-input-date-picker-actions-icon-color-hover | Specifies the component's actions icon color on hover. |
| --calcite-input-date-picker-background-color | Specifies the component's input background color. |
| --calcite-input-date-picker-border-color | Specifies the component's input border color. |
| --calcite-input-date-picker-calendar-actions-background-color | Specifies the background color of actions of the calendar. |
| --calcite-input-date-picker-calendar-actions-background-color-hover | Specifies the background color of actions of the calendar when hovered. |
| --calcite-input-date-picker-calendar-actions-background-color-press | Specifies the background color of actions of the calendar when pressed. |
| --calcite-input-date-picker-calendar-actions-text-color | Specifies the text color of the component's calendar actions. |
| --calcite-input-date-picker-calendar-actions-text-color-press | Specifies the text color of the component's calendar actions when pressed. |
| --calcite-input-date-picker-calendar-border-color | Specifies the component's calendar border color. |
| --calcite-input-date-picker-calendar-corner-radius | Specifies the component's calendar corner radius. |
| --calcite-input-date-picker-calendar-current-day-text-color | Specifies the text color of current day of the component's date-picker. |
| --calcite-input-date-picker-calendar-day-background-color | Specifies the background color of day of the calendar. |
| --calcite-input-date-picker-calendar-day-background-color-hover | Specifies the background color of day of the calendar when hovered. |
| --calcite-input-date-picker-calendar-day-current-text-color | --calcite-input-date-picker-calendar-current-day-text-color. Specifies the text color of current day of the component's date-picker. |
| --calcite-input-date-picker-calendar-day-range-text-color | Specifies the text color of select day range of the component's date-picker. |
| --calcite-input-date-picker-calendar-day-text-color-selected | Specifies the text color of selected day of the component's date-picker. |
| --calcite-input-date-picker-calendar-day-outside-range-background-color-hover | Specifies the background color of day's outside current range of the component's date-picker when hovered. |
| --calcite-input-date-picker-calendar-day-outside-range-text-color-hover | Specifies the text color of day's outside current range of the component's date-picker when hovered. |
| --calcite-input-date-picker-calendar-day-text-color | Specifies the text color of day of the component's date-picker. |
| --calcite-input-date-picker-calendar-day-text-color-hover | Specifies the text color of day of the component's date-picker when hovered. |
| --calcite-input-date-picker-calendar-selected-background-color | Specifies the background color of selected day and day range of the calendar. |
| --calcite-input-date-picker-calendar-shadow | the component's calendar shadow. |
| --calcite-input-date-picker-calendar-icon-color | Specifies the component's calendar icon color. |
| --calcite-input-date-picker-calendar-icon-color-hover | Specifies the component's calendar icon color. |
| --calcite-input-date-picker-calendar-month-select-text-color | Specifies the text color of month select of the component's date-picker. |
| --calcite-input-date-picker-calendar-range-divider-color | Specifies the divider color between the component's date-picker. |
| --calcite-input-date-picker-calendar-text-color | Specifies the text color of the component's calendar week, year & suffix. |
| --calcite-input-date-picker-corner-radius | Specifies the component's input corner radius. |
| --calcite-input-date-picker-divider-color | Specifies the component's divider color between two inputs when in range mode. |
| --calcite-input-date-picker-icon-color | Specifies the component's in-field input icon color. |
| --calcite-input-date-picker-icon-color-hover | |
| --calcite-input-date-picker-placeholder-text-color | Specifies the component's input placeholder text color. |
| --calcite-input-date-picker-shadow | Specifies the component's input shadow. |
| --calcite-input-date-picker-text-color | Specifies the component's input text color. |
Events
| Name | Description | Behavior |
|---|---|---|
| calciteInputDatePickerBeforeClose | Fires when the component is requested to be closed and before the closing transition begins. | |
| calciteInputDatePickerBeforeOpen | Fires when the component is added to the DOM but not rendered, and before the opening transition begins. | |
| calciteInputDatePickerChange | Fires when the component's value changes. | |
| calciteInputDatePickerClose | Fires when the component is closed and animation is complete. | |
| calciteInputDatePickerOpen | Fires when the component is open and animation is complete. |
Methods
| Name | Description | Signature |
|---|---|---|
| componentOnReady | Create a promise that resolves once component is fully loaded. | componentOnReady(): Promise<void> |
| reposition | Updates the position of the component. | reposition(delayed?: boolean): Promise<void> |
| setFocus | Sets focus on the component. | setFocus(options?: FocusOptions): Promise<void> |