Skip to content

Date Picker

Date Picker is a calendar component used for 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

Accessibility

Keyboard navigation

KeyFunction
SpaceSelects the focused element. When the date is selected and contained in a parent component, such as calcite-input-date-picker, closes the component.
EnterSelects the focused element. When the date is selected and contained in a parent component, such as calcite-input-date-picker, closes the component.
TabMoves focus between the component's elements. When the currently focused step is the date, focus will cycle to the previous month.
Tab and ShiftMoves focus between the component's elements. When the currently focused step is the previous month, focus will cycle to the date.
Arrow topWhen focused on the year, increases the year value. When focused on the date, moves focus to the previous non-disabled week.
Arrow bottomWhen focused on the year, decreases the year value. When focused on the date, moves focus to the next non-disabled week.
Arrow leftWhen focused on the year, moves the cursor to the left. When focused on the date, moves focus to previous non-disabled date.
Arrow rightWhen focused on the year, moves the cursor to the right. When focused on the date, moves focus to next non-disabled date.
HomeWhen focused on the year, moves the cursor to the first number. When focused on the date, moves focus to the first day of the selected month.
EndWhen focused on the year, moves the cursor to the last number. When focused on the date, moves focus to the last day of the selected month.
EscWhen contained in a parent component, such as calcite-input-date-picker, closes the component.

API reference

Properties

PropertyAttributeDescriptionTypeDefault
activeDateSpecifies the component's active date.Date
activeRangeactive-rangeWhen range is true, specifies the active range. Where "start" specifies the starting range date and "end" the ending range date."end" | "start"
headingLevelheading-levelSpecifies the heading level of the component's heading for proper document structure, without affecting visual styling.1 | 2 | 3 | 4 | 5 | 6
layoutlayoutDefines the layout of the component."horizontal" | "vertical""horizontal"
maxmaxWhen the component resides in a form, specifies the latest allowed date ("yyyy-mm-dd").string
maxAsDateSpecifies the latest allowed date as a full date object (new Date("yyyy-mm-dd")).Date
messageOverridesUse this property to override individual strings used by the component.{ nextMonth?: string; prevMonth?: string; monthMenu?: string; yearMenu?: string; year?: string; }
minminWhen the component resides in a form, specifies the earliest allowed date ("yyyy-mm-dd").string
minAsDateSpecifies the earliest allowed date as a full date object (new Date("yyyy-mm-dd")).Date
monthStylemonth-styleSpecifies the monthStyle used by the component."abbreviated" | "wide""wide"
numberingSystemnumbering-systemSpecifies the Unicode numeral system used by the component for localization. This property cannot be dynamically changed."arab" | "arabext" | "latn"
proximitySelectionDisabledproximity-selection-disabledWhen true, disables the default behavior on the third click of narrowing or extending the range and instead starts a new range.booleanfalse
rangerangeWhen true, activates the component's range mode to allow a start and end date.booleanfalse
scalescaleSpecifies the size of the component."l" | "m" | "s""m"
valuevalueSpecifies the selected date as a string ("yyyy-mm-dd"), or an array of strings for range values (["yyyy-mm-dd", "yyyy-mm-dd"]).Array<string> | string
valueAsDateSpecifies the selected date as a full date object (new Date("yyyy-mm-dd")), or an array containing full date objects ([new Date("yyyy-mm-dd"), new Date("yyyy-mm-dd")]).Array<Date> | Date

Styles

NameDescription
--calcite-date-picker-border-colorSpecifies the component's border color.
--calcite-date-picker-corner-radiusSpecifies the component's border radius.
--calcite-date-picker-range-calendar-divider-colorSpecifies the divider color between calendar's when range="true".
--calcite-date-picker-week-header-text-colorSpecifies the week header text color.
--calcite-date-picker-header-action-background-colorSpecifies the background color of header action's of the component.
--calcite-date-picker-header-action-background-color-hoverSpecifies the background color of header action's of the component when hovered.
--calcite-date-picker-header-action-background-color-pressSpecifies the background color of header action's of the component when pressed.
--calcite-date-picker-header-action-text-colorSpecifies the text color of header action's of the component.
--calcite-date-picker-header-action-text-color-pressSpecifies the text color of header action's of the component when pressed.
--calcite-date-picker-year-text-colorSpecifies the text color of year & suffix of the component.
--calcite-date-picker-month-select-font-sizeSpecifies the font size of month select of the component.
--calcite-date-picker-month-select-text-colorSpecifies the text color of month select of the component.
--calcite-date-picker-month-select-icon-colorSpecifies the icon color of month select of the component.
--calcite-date-picker-month-select-icon-color-hoverSpecifies the icon color of month select of the component when hovered.
--calcite-date-picker-day-background-colorSpecifies the background color of day of the component.
--calcite-date-picker-day-background-color-hoverSpecifies the background color of day of the component when hovered.
--calcite-date-picker-day-text-colorSpecifies the text color of day of the component.
--calcite-date-picker-day-text-color-hoverSpecifies the text color of day of the component when hovered.
--calcite-date-picker-current-day-text-colorSpecifies the text color of current day of the component.
--calcite-date-picker-day-background-color-selectedSpecifies the background color of selected day of the component.
--calcite-date-picker-day-text-color-selectedSpecifies the text color of selected day of the component.
--calcite-date-picker-day-range-text-colorSpecifies the text color of select day range of the component.
--calcite-date-picker-day-range-background-colorSpecifies the background color of select day range of the component.
--calcite-date-picker-day-outside-range-background-color-hoverSpecifies the background color of day's outside current range when hovered.
--calcite-date-picker-day-outside-range-text-color-hoverSpecifies the text color of day's outside current range when hovered.

Events

NameDescriptionBehavior
calciteDatePickerChangeFires when a user changes the component's date. For range events, use calciteDatePickerRangeChange.bubblescomposed
calciteDatePickerRangeChangeFires when a user changes the component's date range. For components without range use calciteDatePickerChange.bubblescomposed

Methods

NameDescriptionSignature
componentOnReadyCreate a promise that resolves once component is fully loaded.componentOnReady(): Promise<void>
setFocusSets focus on the component's first focusable element.setFocus(): Promise<void>

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