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

1
<calcite-date-picker></calcite-date-picker>
v3.0.3

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

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.

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close