Date Range Picker

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

In a Form

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

<template>
  <form>
    <VLayout column-spacing="small" column-basis="block">
      <div>
        <VDateRangePicker name="date" label="Event duration" required />
      </div>
      <div class="buttons">
        <VButton label="Reset" appearance="outlined" type="reset" />
        <VButton label="Submit" appearance="filled" type="submit" />
      </div>
    </VLayout>
  </form>
</template>

<style scoped>
.buttons {
  display: flex;
  gap: 12px;
}
</style>

<form>
  <vwc-layout column-spacing="small" column-basis="block">
    <div>
      <vwc-date-range-picker name="date" label="Event duration" required></vwc-date-range-picker>
    </div>
    <div class="buttons">
      <vwc-button label="Reset" type="reset" appearance="outlined"></vwc-button>
      <vwc-button label="Submit" appearance="filled" type="submit"></vwc-button>
    </div>
  </vwc-layout>
</form>

<style>
  .buttons {
    display: flex;
    gap: 12px;
  }
</style>