Input Date Picker contains a calendar component within an input used for choosing a day of a month.
OverviewInput Date Picker is an input-driven component containing the Date Picker.
UsageFor more detailed keyboard navigation, visit the Date Picker's keyboard navigation.
Key FunctionTab 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 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" | "right" | "left" | "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 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. { chooseDate?: string; dateFormat?: string; } & { 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. 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 read-only 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 Events 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(): Promise<void>
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4