Date Picker

Calcite Date Picker is a calendar component used for quickly choosing a day of a month.

Overview

Date Picker can be used to pick a day or range of days that will autofill an input. Date Picker is designed to work within a dropdown or statically within the interface.

Usage

  • Choosing a day
  • Choosing a range of days

Sample

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

Accessibility

Keyboard navigation

KeyFunction
Arrow leftMove focus to previous non-disabled date
Arrow rightMove focus to next non-disabled date
Arrow topMove focus to previous non-disabled week
Arrow bottomMove focus to next non-disabled week
HomeMove focus to first non-disabled date
EndMove focus to last non-disabled date
SpaceMake currently focused date selection
EnterMake currently focused date selection
TabMove focus between month/year items and dates. If the currently focused step is the previous month chevron, the focus will leave the component
Tab and ShiftMove focus between month/year items and dates. If the currently focused step is the currently focused date, the focus will leave the component

API reference

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

Properties

PropertyAttributeDescriptionTypeValues
activeRangeactive-range

Active range

optional
typedChoose from a set of typed values
endstart
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
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)
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
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

optional
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

Trigger calcite date change when a user changes the date.

bubblescomposedcancelable
Date
calciteDatePickerRangeChange

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

bubblescomposedcancelable
DateRangeChangeView documentation

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