Vivid Logo Vivid

Date Range Picker

Combines an Input and a dual Calendar popover to allow users to enter or select a date range.

Usage

import { VDateRangePicker } from '@vonage/vivid-vue';

import { registerDateRangePicker } from '@vonage/vivid';

registerDateRangePicker('your-prefix');

Locales

Dates will be stored in the format YYYY-MM-DD and displayed in the configured locale. Use the locale switcher in the example below to see this in action.

See Localization for more details.

Slots

Helper Text Slot

The helper-text slot allows you to use rich content as the date picker's helper text.

Contextual Help

The contextual-help slot allows you to add the Contextual Help component next to the label.

API Reference

Properties

Property Type Default Description
disabled boolean Sets the element's disabled state. A disabled element will not be included during form submission.
currentEnd
(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.
errorText string Provides a custom error message. Any current error state will be overridden.
helperText string Provides additional information to help the user enter the correct information. To add HTML to the helper text, use the helper-text slot instead.
initialEnd string The initial end value. This value sets the `end` property only when the `end` property has not been explicitly set.
initialStart string The initial start value. This value sets the `start` property only when the `start` property has not been explicitly set.
initialValue string The default value of the element. This value sets the `value` property only when the `value` property has not been explicitly set.
label string The label for the form element.
max string The latest accepted date.
min string The earliest accepted date.
name string The name of the element. This element's value will be surfaced during form submission under the provided name.
readOnly boolean Whether the date-picker is readonly.
required boolean Require the field to be completed prior to form submission.
scale 'condensed' | 'normal' Sets the display size of the picker field input element.
currentStart
(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.
value string The current value of the element.
Property Type Default Description
disabled boolean Sets the element's disabled state. A disabled element will not be included during form submission.
current-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.
error-text string Provides a custom error message. Any current error state will be overridden.
helper-text string Provides additional information to help the user enter the correct information. To add HTML to the helper text, use the helper-text slot instead.
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 initial start value. This value sets the `start` property only when the `start` property has not been explicitly set.
value string The default value of the element. This value sets the `value` property only when the `value` property has not been explicitly set.
label string The label for the form element.
max string The latest accepted date.
min string The earliest accepted date.
name string The name of the element. This element's value will be surfaced during form submission under the provided name.
readonly boolean Whether the date-picker is readonly.
required boolean Require the field to be completed prior to form submission.
scale 'condensed' | 'normal' Sets the display size of the picker field input element.
current-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.
current-value string The current value of the element.

Slots

Name Description
contextual-help Slot for the contextual-help component, displayed next to the label.
helper-text Describes how to use the date-range-picker. Alternative to the `helper-text` attribute.
Name Description
contextual-help Slot for the contextual-help component, displayed next to the label.
helper-text Describes how to use the date-range-picker. Alternative to the `helper-text` attribute.

Events

Event Type Description
change CustomEvent<undefined> Emitted when either the start or end value changes
input CustomEvent<undefined> Emitted when either the start or end value changes
input:end CustomEvent<undefined> Event emitted when the end value changes
input:start CustomEvent<undefined> Event emitted when the start value changes
update:end string Fires when the end value changes
update:start string Fires when the start value changes
Name Type Description
change CustomEvent<undefined> Emitted when either the start or end value changes
input CustomEvent<undefined> Emitted when either the start or end value changes
input:end CustomEvent<undefined> Event emitted when the end value changes
input:start CustomEvent<undefined> Event emitted when the start value changes

Methods

Name Params Returns Description
checkValidity boolean Return the current validity of the element.
reportValidity boolean Return the current validity of the element. If false, fires an invalid event at the element.