Skip to content

VDateRangePicker

Props

NameTypeDescription
disabledbooleanSets the element's disabled state. A disabled element will not be included during form submission.
endstringThe current end value of the element. This property serves as a mechanism to set the end property through both property assignment and the .setAttribute() method. This is useful for setting the field's value in UI libraries that bind data through the .setAttribute() API and don't support IDL attribute binding.
error-textstringProvides a custom error message. Any current error state will be overridden.
helper-textstringProvides additional information to help the user enter the correct information. To add HTML to the helper text, use the helper-text slot instead.
initial-endstringThe initial end value. This value sets the end property only when the end property has not been explicitly set.
initial-startstringThe initial start value. This value sets the start property only when the start property has not been explicitly set.
initial-valuestringThe default value of the element. This value sets the value property only when the value property has not been explicitly set.
labelstringThe label for the form element.
maxstringThe latest accepted date.
minstringThe earliest accepted date.
namestringThe name of the element. This element's value will be surfaced during form submission under the provided name.
readonlybooleanWhether the date-picker is readonly.
requiredbooleanRequire the field to be completed prior to form submission.
scaleEnum:
condensed
normal
Sets the display size of the picker field input element.
startstringThe current start value of the element. This property serves as a mechanism to set the start property through both property assignment and the .setAttribute() method. This is useful for setting the field's value in UI libraries that bind data through the .setAttribute() API and don't support IDL attribute binding.
valuestringThe current value of the element.

Events

NameEvent TypeDescription
changeCustomEvent<undefined>Emitted when either the start or end value changes
inputCustomEvent<undefined>Emitted when either the start or end value changes
input:endCustomEvent<undefined>Event emitted when the end value changes
input:startCustomEvent<undefined>Event emitted when the start value changes

Slots

NameDescription
contextual-helpSlot for the contextual-help component, displayed next to the label.
helper-textDescribes how to use the date-range-picker. Alternative to the helper-text attribute.

Methods

NameTypeDescription
checkValidity() => booleanReturn the current validity of the element.
reportValidity() => booleanReturn the current validity of the element. If false, fires an invalid event at the element.