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-api-vue';

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

registerDateRangePicker('your-prefix');

<script type="module">
  import { registerDateRangePicker } from '@vonage/vivid-api';
  registerDateRangePicker('your-prefix');
</script>

<your-prefix-date-range-picker label="Event duration" class="date-range-picker"></your-prefix-date-range-picker>

<script>
  document.querySelector('.date-range-picker').addEventListener('input:start', (e) => {
    console.log('start changed:', e.target.start);
  });

  document.querySelector('.date-range-picker').addEventListener('input:end', (e) => {
    console.log('end changed:', e.target.end);
  });
</script>

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.

<script setup lang="ts">
import { VDateRangePicker } from '@vonage/vivid-api-vue';
</script>

<template>
  <VDateRangePicker label="Event duration">
    <template #helper-text>
      <span>Please see our <a href="#">opening times</a>.</span>
    </template>
  </VDateRangePicker>
</template>

Contextual Help

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

<script setup lang="ts">
import { VDateRangePicker, VContextualHelp } from '@vonage/vivid-api-vue';
</script>

<template>
  <VDateRangePicker label="Event duration">
    <template #contextual-help>
      <VContextualHelp>Please see our opening times</VContextualHelp>
    </template>
  </VDateRangePicker>
</template>

API Reference

Properties

Property	Type	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	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

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

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.