Time Picker
24-hr
When mode is dateTime or time, use the is24hr prop to use 24-hr selections.
Value:3/30/2025, 1:31:29 AM (Date)
S
M
T
W
T
F
S
23
24
25
26
27
28
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
SunMar302025
:
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:3/30/2025, 1:31:29 AM (Date)
S
M
T
W
T
F
S
23
24
25
26
27
28
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
:
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:3/30/2025, 1:31:29 AM (Date)
Time Accuracy:
S
M
T
W
T
F
S
23
24
25
26
27
28
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
SunMar302025
::
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>