Date Range Picker

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

Labelling

Label Text

The label attribute provides a short description of the purpose of the Date Picker.

If a visible label can’t be used, provide one using the

aria-label

attribute. This ensures screen readers announce the purpose of the element, making it accessible to all users.

Helper Text

The helper-text attribute provides additional information to help the user enter the correct information.

To add HTML to the helper text, use the helper-text slot.

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

<template>
  <VDateRangePicker helper-text="Select a date for the event to start" label="Event duration" />
</template>

Contextual Help

You can add the Contextual Help component using the contextual-help slot. It will be displayed next to the label, providing users additional information.

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

<template>
  <VDateRangePicker label="Event duration">
    <template #contextual-help>
      <VContextualHelp>Select a date for the event to start</VContextualHelp>
    </template>
  </VDateRangePicker>
</template>

Validation Feedback

Error Text

The error-text attribute provides a custom error message. Any current error state will be overridden by error-text.

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

<template>
  <VDateRangePicker error-text="Please select dates for the event to start and end" label="Event duration" />
</template>

Start and End Values

Use the start and end attributes to define the date range. If either attribute is set to an empty string or undefined, no date is selected.

When a date is chosen, these attributes always contain a valid date in the YYYY-MM-DD format. If the user enters an invalid date, an error message is displayed.

Min

Set the min attribute to configure the earliest date to accept. The user will be prevented from choosing an earlier date, however it is still possible to manually enter one.

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

<template>
  <VDateRangePicker min="2023-06-10" label="Date range" start="2023-06-15" end="2023-06-20" />
</template>

Max

Set the max attribute to configure the latest date to accept. The user will be prevented from choosing an later date, however it is still possible to manually enter one.

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

<template>
  <VDateRangePicker max="2023-06-20" label="Date range" start="2023-06-10" end="2023-06-15" />
</template>

Scale

The scale attribute controls the Date Range Picker input element display size.

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

<template>
  <div class="container">
    <VDateRangePicker scale="normal" label="Normal" />
    <VDateRangePicker scale="condensed" label="Condensed" />
  </div>
</template>

<style scoped>
.container {
  display: flex;
  gap: 16px;
}
</style>

<div class="container">
  <vwc-date-range-picker scale="normal" label="Normal"></vwc-date-range-picker>
  <vwc-date-range-picker scale="condensed" label="Condensed"></vwc-date-range-picker>
</div>

<style>
  .container {
    display: flex;
    gap: 16px;
  }
</style>

Disabled

Add the disabled attribute to disable the Date Range Picker.

Readonly

Add the readonly attribute to make the Date Range Picker readonly.