calcite_input_date_picker: Create a InputDatePicker component

In calcite: Bindings to the Calcite Design System 'JavaScript' Component Library

Create a InputDatePicker component

Description

Create a InputDatePicker component

Usage

calcite_input_date_picker(...)

Arguments

...	named attributes passed to htmltools::tag()

Details

Properties

The following properties are provided by this component:

Name	Attribute	Description	Values	Reflects to Attribute
disabled	disabled	When true, interaction is prevented and the component is displayed with lower opacity.	boolean	TRUE
flipPlacements	NA	Specifies the component's fallback calcite-date-picker placement when it's initial or specified placement has insufficient space available.	Check API reference	FALSE
focusTrapDisabled	focus-trap-disabled	When true, prevents focus trapping.	boolean	TRUE
form	form	The 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	TRUE
headingLevel	heading-level	Specifies the heading level of the component's heading for proper document structure, without affecting visual styling.	1 | 2 | 3 | 4 | 5 | 6	TRUE
layout	layout	Defines the layout of the component.	"horizontal" | "vertical"	TRUE
max	max	When the component resides in a form, specifies the latest allowed date ("yyyy-mm-dd").	string	TRUE
maxAsDate	NA	Specifies the latest allowed date as a full date object.	Date	FALSE
messageOverrides	NA	Use this property to override individual strings used by the component.	Check API reference	FALSE
min	min	When the component resides in a form, specifies the earliest allowed date ("yyyy-mm-dd").	string	TRUE
minAsDate	NA	Specifies the earliest allowed date as a full date object.	Date	FALSE
monthStyle	month-style	Specifies the monthStyle used by the component.	"abbreviated" | "wide"	FALSE
name	name	Specifies the name of the component. Required to pass the component's value on form submission.	string	TRUE
numberingSystem	numbering-system	Specifies the Unicode numeral system used by the component for localization. This property cannot be dynamically changed.	"arab" | "arabext" | "latn"	TRUE
open	open	When true, displays the calcite-date-picker component.	boolean	TRUE
overlayPositioning	overlay-positioning	Determines 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
placement	placement	Specifies the placement of the calcite-date-picker relative to the component.	"bottom" | "bottom-end" | "bottom-start" | "top" | "top-end" | "top-start"	TRUE
proximitySelectionDisabled	proximity-selection-disabled	When true, disables the default behavior on the third click of narrowing or extending the range. Instead starts a new range.	boolean	FALSE
range	range	When true, activates a range for the component.	boolean	TRUE
readOnly	read-only	When true, the component's value can be read, but controls are not accessible and the value cannot be modified.	boolean	TRUE
required	required	When true and the component resides in a form, the component must have a value in order for the form to submit.	boolean	TRUE
scale	scale	Specifies the size of the component.	"l" | "m" | "s"	TRUE
status	status	Specifies the status of the input field, which determines message and icons.	"idle" | "invalid" | "valid"	TRUE
validationIcon	validation-icon	Specifies the validation icon to display under the component.	boolean | string	TRUE
validationMessage	validation-message	Specifies the validation message to display under the component.	string	FALSE
validity	NA	The current validation state of the component.	Check API reference	FALSE
value	value	Selected date as a string in ISO format ("yyyy-mm-dd").	Check API reference	FALSE
valueAsDate	NA	The component's value as a full date object.	Check API reference	FALSE

Events

The following events are observed by shiny:

Event	Description
calciteInputDatePickerBeforeClose	Fires when the component is requested to be closed and before the closing transition begins.
calciteInputDatePickerBeforeOpen	Fires when the component is added to the DOM but not rendered, and before the opening transition begins.
calciteInputDatePickerChange	Fires when the component's value changes.
calciteInputDatePickerClose	Fires when the component is closed and animation is complete.
calciteInputDatePickerOpen	Fires when the component is open and animation is complete.

Value

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

References

Official Documentation

Examples

calcite_input_date_picker()

calcite documentation built on April 3, 2025, 7:11 p.m.