Input Date Picker
Overview
Sample
API reference
Properties
| Property | Attribute | Description | Type | Values |
|---|---|---|---|---|
| active | active | Expand or collapse when calendar does not have input | truefalse | |
| disabled | disabled | When false, the component won't be interactive. | truefalse | |
| 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. | 123456 | |
| 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. | bottombottom-endbottom-leadingbottom-startbottom-trailingtoptop-endtop-leadingtop-starttop-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. | truefalse | |
| range | range | Range mode activation | truefalse | |
| scale | scale | specify the scale of the date picker | lm (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> |