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

Events

Methods

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