Skip to content

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

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
calendarscalendarsSpecifies the number of calendars displayed when range is true.1 | 22
disableddisabledWhen present, 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" | "left" | "right" | "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 present, 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
labellabelAccessible name for the component.string
labelTextlabel-textWhen provided, displays label text on the component.string
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.Record<string, unknown>
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 present, 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 present, disables the default behavior on the third click of narrowing or extending the range. Instead starts a new range.booleanfalse
rangerangeWhen present, activates a range for the component.booleanfalse
readOnlyread-onlyWhen present, the component's value can be read, but controls are not accessible and the value cannot be modified.booleanfalse
requiredrequiredWhen present 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

Styles

NameDescription
--calcite-input-date-picker-border-colorSpecifies the component's input border color.
--calcite-input-date-picker-divider-colorSpecifies the component's divider color between two inputs when in range mode.
--calcite-input-date-picker-shadowSpecifies the component's input shadow.
--calcite-input-date-picker-calendar-shadowthe component's calendar shadow.
--calcite-input-date-picker-icon-colorSpecifies the component's in-field input icon color.
--calcite-input-date-picker-icon-color-hoverSpecifies the component's in-field input icon color on hover.
--calcite-input-date-picker-actions-icon-colorSpecifies the component's actions icon color.
--calcite-input-date-picker-actions-icon-color-hoverSpecifies the component's actions icon color on hover.
--calcite-input-date-picker-calendar-icon-colorSpecifies the component's calendar icon color.
--calcite-input-date-picker-calendar-icon-color-hoverSpecifies the component's calendar icon color.
--calcite-input-date-picker-background-colorSpecifies the component's input background color.
--calcite-input-date-picker-calendar-actions-background-colorSpecifies the background color of actions of the calendar.
--calcite-input-date-picker-calendar-actions-background-color-hoverSpecifies the background color of actions of the calendar when hovered.
--calcite-input-date-picker-calendar-actions-background-color-pressSpecifies the background color of actions of the calendar when pressed.
--calcite-input-date-picker-calendar-selected-background-colorSpecifies the background color of selected day and day range of the calendar.
--calcite-input-date-picker-calendar-day-background-colorSpecifies the background color of day of the calendar.
--calcite-input-date-picker-calendar-day-background-color-hoverSpecifies the background color of day of the calendar when hovered.
--calcite-input-date-picker-calendar-day-outside-range-background-color-hoverSpecifies the background color of day's outside current range of the component's date-picker when hovered.
--calcite-input-date-picker-corner-radiusSpecifies the component's input corner radius.
--calcite-input-date-picker-calendar-corner-radiusSpecifies the component's calendar corner radius.
--calcite-input-date-picker-text-colorSpecifies the component's input text color.
--calcite-input-date-picker-placeholder-text-colorSpecifies the component's input placeholder text color.
--calcite-input-date-picker-calendar-actions-text-colorSpecifies the text color of the component's calendar actions.
--calcite-input-date-picker-calendar-actions-text-color-pressSpecifies the text color of the component's calendar actions when pressed.
--calcite-input-date-picker-calendar-text-colorSpecifies the text color of the component's calendar week, year & suffix.
--calcite-input-date-picker-calendar-month-select-text-colorSpecifies the text color of month select of the component's date-picker.
--calcite-input-date-picker-calendar-day-text-colorSpecifies the text color of day of the component's date-picker.
--calcite-input-date-picker-calendar-day-text-color-hoverSpecifies the text color of day of the component's date-picker when hovered.
--calcite-input-date-picker-calendar-day-current-text-colorSpecifies the text color of current day of the component's date-picker.
--calcite-input-date-picker-calendar-day-text-color-selectedSpecifies the text color of selected day of the component's date-picker.
--calcite-input-date-picker-calendar-day-range-text-colorSpecifies the text color of select day range of the component's date-picker.
--calcite-input-date-picker-calendar-day-outside-range-text-color-hoverSpecifies the text color of day's outside current range of the component's date-picker when hovered.
--calcite-input-date-picker-calendar-border-colorSpecifies the component's calendar border color.
--calcite-input-date-picker-calendar-range-divider-colorSpecifies the divider color between the component's date-picker

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(options?: FocusOptions): Promise<void>

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