On this page

VDateRangePicker

Props

Name	Type	Description
label	`string`	The label for the form element.
error-text	`string`	The error text for the form element.
aria-current	Enum: `page` `step` `location` `date` `time` `true` `false`	Indicates the element that represents the current item within a container or set of related elements.
disabled	`boolean`	Sets the element's disabled state. A disabled element will not be included during form submission.
name	`string`	The name of the element. This element's value will be surfaced during form submission under the provided name.
required	`boolean`	Require the field to be completed prior to form submission.
max	`string`	The latest accepted date of the date-picker.
initial-start	`string`	The initial start value. This value sets the `start` property only when the `start` property has not been explicitly set.
initial-end	`string`	The initial end value. This value sets the `end` property only when the `end` property has not been explicitly set.
start	`string`	The 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.
end	`string`	The 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.
min	`string`	The earliest accepted date of the date-picker.
initial-value	`string`	The initial value of the date-picker.
value	`string`	The current value of the date-picker.
readonly	`boolean`	Whether the date-picker is readonly.

Events

Name	Event Type	Description
click	`MouseEvent`	Fires when a pointing device button (such as a mouse's primary mouse button) is both pressed and released while the pointer is located inside the element.
focus	`FocusEvent`	Fires when the element receives focus.
blur	`FocusEvent`	Fires when the element loses focus.
keydown	`KeyboardEvent`	Fires when a key is pressed.
keyup	`KeyboardEvent`	Fires when a key is released.
input:start	`CustomEvent<undefined>`	Event emitted when the start value changes
input:end	`CustomEvent<undefined>`	Event emitted when the end value changes
input	`CustomEvent<undefined>`	Emitted when either the start or end value changes
change	`CustomEvent<undefined>`	Emitted when either the start or end value changes
clear-click	`CustomEvent<undefined>`	Event emitted when the clear button is clicked.

Slots

Name	Description
helper-text	Describes how to use the date-range-picker. Alternative to the `helper-text` attribute.