Input Date Picker

Input Date Picker contains a calendar component within an input used for choosing a day of a month.

Overview

Input Date Picker is an input-driven component containing the Date Picker.

Usage

  • Choosing a day
  • Choosing a range of days

Sample

3 samples
1
<calcite-input-date-picker></calcite-input-date-picker>
v3.0.2

Accessibility

Keyboard navigation

For more detailed keyboard navigation, visit the Date Picker's keyboard navigation.

KeyFunction
TabMoves focus in and out of the component.
Tab and ShiftMoves focus in and out of the component.
Arrow downOpens and shifts focus to the calcite-date-picker component.
EscWhen the calcite-date-picker component is open, closes the component and shifts focus back to the calcite-input-date-picker.

API reference

Properties

PropertyAttributeDescriptionTypeDefault
disableddisabledWhen true, interaction is prevented and the component is displayed with lower opacity.booleanfalse
flipPlacementsSpecifies the component's fallback calcite-date-picker placement when it's initial or specified placement has insufficient space available.Array<"top" | "bottom" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end" | "leading-start" | "leading" | "leading-end" | "trailing-end" | "trailing" | "trailing-start">
focusTrapDisabledfocus-trap-disabledWhen true, prevents focus trapping.booleanfalse
formformThe id of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any.string
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.Date
messageOverridesUse this property to override individual strings used by the component.{ chooseDate?: string; dateFormat?: string; } & { 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.Date
monthStylemonth-styleSpecifies the monthStyle used by the component."abbreviated" | "wide""wide"
namenameSpecifies the name of the component. Required to pass the component's value on form submission.string
numberingSystemnumbering-systemSpecifies the Unicode numeral system used by the component for localization. This property cannot be dynamically changed."arab" | "arabext" | "latn"
openopenWhen true, displays the calcite-date-picker component.booleanfalse
overlayPositioningoverlay-positioningDetermines the type of positioning to use for the overlaid content. Using "absolute" will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. "fixed" should be used to escape an overflowing parent container, or when the reference element's position CSS property is "fixed"."absolute" | "fixed""absolute"
placementplacementSpecifies the placement of the calcite-date-picker relative to the component."bottom" | "bottom-end" | "bottom-start" | "top" | "top-end" | "top-start""bottom-start"
proximitySelectionDisabledproximity-selection-disabledWhen true, disables the default behavior on the third click of narrowing or extending the range. Instead starts a new range.booleanfalse
rangerangeWhen true, activates a range for the component.booleanfalse
readOnlyread-onlyWhen true, the component's value can be read, but controls are not accessible and the value cannot be modified.booleanfalse
requiredrequiredWhen true and the component resides in a form, the component must have a value in order for the form to submit.booleanfalse
scalescaleSpecifies the size of the component."l" | "m" | "s""m"
statusstatusSpecifies the status of the input field, which determines message and icons."idle" | "invalid" | "valid""idle"
validationIconvalidation-iconSpecifies the validation icon to display under the component.boolean | string
validationMessagevalidation-messageSpecifies the validation message to display under the component.string
validityread-onlyThe current validation state of the component.{ valid: boolean; badInput: boolean; customError: boolean; patternMismatch: boolean; rangeOverflow: boolean; rangeUnderflow: boolean; stepMismatch: boolean; tooLong: boolean; tooShort: boolean; typeMismatch: boolean; valueMissing: boolean; }
valuevalueSelected date as a string in ISO format ("yyyy-mm-dd").Array<string> | string
valueAsDateThe component's value as a full date object.Array<Date> | Date

Events

NameDescriptionBehavior
calciteInputDatePickerBeforeCloseFires when the component is requested to be closed and before the closing transition begins.bubblescomposed
calciteInputDatePickerBeforeOpenFires when the component is added to the DOM but not rendered, and before the opening transition begins.bubblescomposed
calciteInputDatePickerChangeFires when the component's value changes.bubblescomposed
calciteInputDatePickerCloseFires when the component is closed and animation is complete.bubblescomposed
calciteInputDatePickerOpenFires when the component is open and animation is complete.bubblescomposed

Methods

NameDescriptionSignature
componentOnReadyCreate a promise that resolves once component is fully loaded.componentOnReady(): Promise<void>
repositionUpdates the position of the component.reposition(delayed?: boolean): Promise<void>
setFocusSets focus on the component.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