Skip to contents

Create a InputDatePicker component

Usage

calcite_input_date_picker(...)

Arguments

...

named attributes passed to htmltools::tag()

Value

an object of class calcite_component which is a subclass of shiny.tag

Details

Properties

The following properties are provided by this component:

NameAttributeDescriptionValuesReflects to Attribute
disableddisabledWhen true, interaction is prevented and the component is displayed with lower opacity.booleanTRUE
flipPlacementsNASpecifies the component's fallback calcite-date-picker placement when it's initial or specified placement has insufficient space available.Check API referenceFALSE
focusTrapDisabledfocus-trap-disabledWhen true, prevents focus trapping.booleanTRUE
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.stringTRUE
headingLevelheading-levelSpecifies the heading level of the component's heading for proper document structure, without affecting visual styling.1 | 2 | 3 | 4 | 5 | 6TRUE
layoutlayoutDefines the layout of the component."horizontal" | "vertical"TRUE
maxmaxWhen the component resides in a form, specifies the latest allowed date ("yyyy-mm-dd").stringTRUE
maxAsDateNASpecifies the latest allowed date as a full date object.DateFALSE
messageOverridesNAUse this property to override individual strings used by the component.Check API referenceFALSE
minminWhen the component resides in a form, specifies the earliest allowed date ("yyyy-mm-dd").stringTRUE
minAsDateNASpecifies the earliest allowed date as a full date object.DateFALSE
monthStylemonth-styleSpecifies the monthStyle used by the component."abbreviated" | "wide"FALSE
namenameSpecifies the name of the component. Required to pass the component's value on form submission.stringTRUE
numberingSystemnumbering-systemSpecifies the Unicode numeral system used by the component for localization. This property cannot be dynamically changed."arab" | "arabext" | "latn"TRUE
openopenWhen true, displays the calcite-date-picker component.booleanTRUE
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"TRUE
placementplacementSpecifies the placement of the calcite-date-picker relative to the component."bottom" | "bottom-end" | "bottom-start" | "top" | "top-end" | "top-start"TRUE
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.booleanTRUE
readOnlyread-onlyWhen true, the component's value can be read, but controls are not accessible and the value cannot be modified.booleanTRUE
requiredrequiredWhen true and the component resides in a form, the component must have a value in order for the form to submit.booleanTRUE
scalescaleSpecifies the size of the component."l" | "m" | "s"TRUE
statusstatusSpecifies the status of the input field, which determines message and icons."idle" | "invalid" | "valid"TRUE
validationIconvalidation-iconSpecifies the validation icon to display under the component.boolean | stringTRUE
validationMessagevalidation-messageSpecifies the validation message to display under the component.stringFALSE
validityNAThe current validation state of the component.Check API referenceFALSE
valuevalueSelected date as a string in ISO format ("yyyy-mm-dd").Check API referenceFALSE
valueAsDateNAThe component's value as a full date object.Check API referenceFALSE

Events

The following events are observed by shiny:

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

Examples

calcite_input_date_picker()
#> <calcite-input-date-picker></calcite-input-date-picker>