Input Date Picker

Overview

Sample

Show code snippetCopy code snippet
Edit sample on Codepen
v1.0.0-beta.83
Toggle preview themeToggle preview direction

API reference

calcite-input-date-picker
v1.0.0-beta.83

Properties

PropertyAttributeDescriptionTypeValues
activeactive

Expand or collapse when calendar does not have input

booleanA boolean property should be present, or not
truefalse
disableddisabled

When false, the component won't be interactive.

booleanA boolean property should be present, or not
truefalse
endend
deprecateduse value instead

Selected end date

optional
stringA custom string
undefined
endAsDate
deprecateduse valueAsDate instead

Selected end date as full date object

optional
dateAccepts a valid Date()
undefined
flipPlacements

Defines the available placements that can be used when a flip occurs.

optional
typedChoose from a set of typed values
ComputedPlacement[]
headingLevelheading-level

Number at which section headings should start for this component.

typedChoose from a set of typed values
123456
intlNextMonthintl-next-month

Localized string for "next month" (used for aria label)

optional
stringA custom string
"Next month" (default)
intlPrevMonthintl-prev-month

Localized string for "previous month" (used for aria label)

optional
stringA custom string
"Previous month" (default)
intlYearintl-year

Localized string for "year" (used for aria label)

optional
stringA custom string
"Year" (default)
layoutlayout

Layout

typedChoose from a set of typed values
horizontal (default)vertical
localelocale

BCP 47 language tag for desired language and country format

optional
stringA custom string
document.documentElement.lang || "en" (default)
maxmax

Latest allowed date ("yyyy-mm-dd")

optional
stringA custom string
undefined
maxAsDate

Latest allowed date as full date object

optional
dateAccepts a valid Date()
undefined
minmin

Earliest allowed date ("yyyy-mm-dd")

optional
stringA custom string
undefined
minAsDate

Earliest allowed date as full date object

optional
dateAccepts a valid Date()
undefined
namename

The picker's name. Gets submitted with the form.

stringA custom string
undefined
overlayPositioningoverlay-positioning

Describes the type of positioning to use for the overlaid content. If your element is in a fixed container, use the 'fixed' value.

typedChoose from a set of typed values
absolute (default)fixed
placementplacement

Determines where the date-picker component will be positioned relative to the input.

typedChoose from a set of typed values
bottombottom-endbottom-leadingbottom-startbottom-trailingtoptop-endtop-leadingtop-starttop-trailing
proximitySelectionDisabledproximity-selection-disabled

Disables the default behaviour on the third click of narrowing or extending the range and instead starts a new range.

booleanA boolean property should be present, or not
truefalse
rangerange

Range mode activation

booleanA boolean property should be present, or not
truefalse
scalescale

specify the scale of the date picker

typedChoose from a set of typed values
lm (default)s
startstart
deprecateduse value instead

Selected start date

optional
stringA custom string
undefined
startAsDate
deprecateduse valueAsDate instead

Selected start date as full date object

optional
dateAccepts a valid Date()
undefined
valuevalue

Selected date

typedChoose from a set of typed values
valueAsDate

Selected date as full date object

optional
typedChoose from a set of typed values

Events

NameDescriptionDetail
calciteDatePickerChange
deprecateduse `calciteInputDatePickerChange` instead.

Trigger calcite date change when a user changes the date.

bubblescomposedcancelable
Date
calciteDatePickerRangeChange
deprecateduse `calciteInputDatePickerChange` instead.

Trigger calcite date change when a user changes the date range.

bubblescomposedcancelable
DateRangeChangeView documentation
calciteInputDatePickerChange

This event fires when the input date picker value changes.

bubblescomposedcancelable
void

Methods

NameDescriptionSignatureReturns
reposition

Updates the position of the component.

reposition() => Promise<void>Promise<void>
setFocus

Updates the position of the component.

setFocus() => Promise<void>Promise<void>

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.