Time Picker
24-hr
When mode is dateTime or time, use the is24hr prop to use 24-hr selections.
Value:4/2/2023, 12:33:54 PM (Date)
vue
<template>
<VDatePicker v-model="date" mode="dateTime" is24hr />
</template>
<script setup>
import { ref } from 'vue';
const date = ref(new Date())
</script>
Hide Header
The time header may be hidden via the hide-time-header prop.
Value:4/2/2023, 12:33:54 PM (Date)
vue
<template>
<VDatePicker v-model="date" mode="dateTime" hide-time-header />
</template>
<script setup>
import { ref } from 'vue';
const date = ref(new Date())
</script>
Accuracy
The time-accuracy prop can be used to limit what components are allowed for selection.
The time accuracy is a number mapping to the most accurate time component allowed (1: hours, 2: minutes, 3: seconds, 4: milliseconds). The default value is 2: minutes.
Value:4/2/2023, 12:33:54 PM (Date)
Time Accuracy:
vue
<template>
<TimeAccuracyPicker v-model="timeAccuracy" />
<VDatePicker v-model="date" mode="dateTime" :time-accuracy="timeAccuracy" />
</template>
<script setup>
import { ref } from 'vue';
const date = ref(new Date());
const timeAccuracy = ref(3);
</script>