Date Range Picker
Combines an Input and a dual Calendar popover to allow users to enter or select a date range.
import { registerDateRangePicker } from '@vonage/vivid';
registerDateRangePicker('your-prefix');
<script setup lang="ts">
import { VDateRangePicker } from '@vonage/vivid-vue';
</script>
<template>
<VDateRangePicker label="Event duration" />
</template>
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.
The helper-text slot allows you to use rich content as the date picker's helper text.
| Name | Type | Description |
|---|---|---|
| disabled | boolean |
Sets the disabled state |
| end | string, date format YYYY-MM-DD |
Sets the end date value |
| error-text | string |
Sets the error text |
| helper-text | string |
Sets the helper text |
| label | string |
Sets the label text |
| min | string, date format YYYY-MM-DD |
Sets the minimum date that can be selected |
| max | string, date format YYYY-MM-DD |
Sets the maximum date that can be selected |
| readonly | boolean |
Sets the field to be readonly |
| required | boolean |
Sets the field to be required |
| start | string, date format YYYY-MM-DD |
Sets the start date value |
| Name | Description |
|---|---|
| helper-text | Add rich text for as field's helper text |
| Name | Type | Bubbles | Composed | Description |
|---|---|---|---|---|
| input:start | CustomEvent<undefined> |
Yes | Yes | Event emitted when the start value changes |
| input:end | CustomEvent<undefined> |
Yes | Yes | Event emitted when the end value changes |
| clear-click | CustomEvent<undefined> |
Yes | Yes | Event emitted when the clear button is clicked. |
| input | CustomEvent<undefined> |
Yes | Yes | Emitted when either the start or end value changes |
| change | CustomEvent<undefined> |
Yes | Yes | Emitted when either the start or end value changes |