Input Date Picker
Overview
Sample
API reference
Properties
Property | Attribute | Description | Type | Values |
---|---|---|---|---|
active | active | Expand or collapse when calendar does not have input | true false | |
disabled | disabled | When false, the component won't be interactive. | true false | |
end | end | Selected end date | undefined | |
endAsDate | Selected end date as full date object | undefined | ||
flipPlacements | Defines the available placements that can be used when a flip occurs. | ComputedPlacement[] | ||
headingLevel | heading-level | Number at which section headings should start for this component. | 1 2 3 4 5 6 | |
intlNextMonth | intl-next-month | Localized string for "next month" (used for aria label) | "Next month" (default) | |
intlPrevMonth | intl-prev-month | Localized string for "previous month" (used for aria label) | "Previous month" (default) | |
intlYear | intl-year | Localized string for "year" (used for aria label) | "Year" (default) | |
layout | layout | Layout | horizontal (default) vertical | |
locale | locale | BCP 47 language tag for desired language and country format | document.documentElement.lang || "en" (default) | |
max | max | Latest allowed date ("yyyy-mm-dd") | undefined | |
maxAsDate | Latest allowed date as full date object | undefined | ||
min | min | Earliest allowed date ("yyyy-mm-dd") | undefined | |
minAsDate | Earliest allowed date as full date object | undefined | ||
name | name | The picker's name. Gets submitted with the form. | undefined | |
overlayPositioning | overlay-positioning | Describes the type of positioning to use for the overlaid content. If your element is in a fixed container, use the 'fixed' value. | absolute (default) fixed | |
placement | placement | Determines where the date-picker component will be positioned relative to the input. | bottom bottom-end bottom-leading bottom-start bottom-trailing top top-end top-leading top-start top-trailing | |
proximitySelectionDisabled | proximity-selection-disabled | Disables the default behaviour on the third click of narrowing or extending the range and instead starts a new range. | true false | |
range | range | Range mode activation | true false | |
scale | scale | specify the scale of the date picker | l m (default) s | |
start | start | Selected start date | undefined | |
startAsDate | Selected start date as full date object | undefined | ||
value | value | Selected date | ||
valueAsDate | Selected date as full date object |
Events
Name | Description | Detail |
---|---|---|
calciteDatePickerChange | Trigger calcite date change when a user changes the date. | Date |
calciteDatePickerRangeChange | Trigger calcite date change when a user changes the date range. | DateRangeChange |
calciteInputDatePickerChange | This event fires when the input date picker value changes. | void |
Methods
Name | Description | Signature | Returns |
---|---|---|---|
reposition | Updates the position of the component. | reposition() => Promise<void> | Promise<void> |
setFocus | Updates the position of the component. | setFocus() => Promise<void> | Promise<void> |