Date Time Picker

Combines an Input and a Calendar/Time Picker popover to allow users to enter or select a date and time.

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 { VDateTimePicker } from '@vonage/vivid-api-vue';
</script>

<template>
  <VDateTimePicker helper-text="Select a date and time for the event to start" label="Start date and time" />
</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 { VDateTimePicker, VContextualHelp } from '@vonage/vivid-api-vue';
</script>

<template>
  <VDateTimePicker label="Start date and time">
    <template #contextual-help>
      <VContextualHelp>Select a date and time for the event to start</VContextualHelp>
    </template>
  </VDateTimePicker>
</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 { VDateTimePicker } from '@vonage/vivid-api-vue';
</script>

<template>
  <VDateTimePicker error-text="Please select a date and time for the event to start" label="Start date and time" />
</template>

Value

The value attribute contains the currently selected date and time.

Empty string or undefined represent no value being selected.

It will always contain a valid value in the format YYYY-MM-DDTHH:MM:SS when a value is selected. If the user enters an invalid value, value will be empty.

The Date Time Picker is time zone agnostic. You need to ensure that value is interpreted correctly in your application.

Min

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

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

<template>
  <VDateTimePicker min="2023-06-10T09:00:00" label="Select date and time" value="2023-06-10T09:00:00" clock="24h" />
</template>

Min Date

Set the min-date 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.

The min-date attribute will take precedence over the min attribute.

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

<template>
  <VDateTimePicker min-date="2023-06-10" label="Select date and time" value="2023-06-15T12:00:00" clock="24h" />
</template>

Min Time

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

The min-time attribute will take precedence over the min attribute.

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 { VDateTimePicker } from '@vonage/vivid-api-vue';
</script>

<template>
  <VDateTimePicker max="2023-06-10T17:00:00" label="Select date and time" value="2023-06-10T12:00:00" clock="24h" />
</template>

Max Date

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

The max-date attribute will take precedence over the max attribute.

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

<template>
  <VDateTimePicker max-date="2023-06-20" label="Select date and time" value="2023-06-15T12:00:00" clock="24h" />
</template>

Max Time

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

The max-time attribute will take precedence over the max attribute.

Clock

The Date Time Picker will display the time in 12h or 24h format depending on the configured locale.

Use the clock attribute to override this behavior.

Minutes Step

Use the minutes-step attribute to configure the step between minutes in the Date Time Picker.

Seconds Step

Use the seconds-step attribute to configure the step between seconds in the Date Time Picker.

If not set, the Date Time Picker will not display seconds.

Scale

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

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

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

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

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

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

Disabled

Add the disabled attribute to disable the Date Time Picker.

Readonly

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