Skip to main content

​
Time Picker

The VTimePicker component allows users to select time using either a visual clock dial or input fields.

​
Usage

<template>
  <v-time-picker
    v-model="time"
    format="ampm"
  />
</template>

<script setup>
import { ref } from 'vue'

const time = ref('10:30')
</script>

​
API

​
Props

​
modelValue
string | Date
The selected time value. Can be a time string (HH:mm or HH:mm:ss) or Date object.
​
format
string
default:"ampm"
Time format. Options: ampm (12-hour), 24hr (24-hour).
​
viewMode
string
default:"hour"
Current view mode. Options: hour, minute, second.
​
period
string
default:"am"
AM/PM period for 12-hour format. Options: am, pm.
​
variant
string
default:"dial"
Display variant. Options: dial, input.
​
useSeconds
boolean
default:"false"
Enables second selection.
​
disabled
boolean
default:"false"
Disables the time picker.
​
readonly
boolean
default:"false"
Makes the time picker read-only.
​
scrollable
boolean
default:"false"
Allows scrolling to select time values.
​
title
string
default:"$vuetify.timePicker.title"
Title displayed in the picker.
​
min
string
Minimum selectable time.
​
max
string
Maximum selectable time.
​
allowedHours
Function | Array
Function or array to determine which hours are selectable.
​
allowedMinutes
Function | Array
Function or array to determine which minutes are selectable.
​
allowedSeconds
Function | Array
Function or array to determine which seconds are selectable.

​
Events

​
update:modelValue
(time: string | null) => void
Emitted when the time value changes.
​
update:hour
(hour: number) => void
Emitted when the hour value changes.
​
update:minute
(minute: number) => void
Emitted when the minute value changes.
​
update:second
(second: number) => void
Emitted when the second value changes.
​
update:period
(period: 'am' | 'pm') => void
Emitted when the AM/PM period changes.
​
update:viewMode
(mode: string) => void
Emitted when the view mode changes.

​
Slots

​
title
Customize the title section.
​
actions
Add custom action buttons.

​
Examples

​
24-Hour Format

<template>
  <v-time-picker
    v-model="time"
    format="24hr"
  />
</template>

<script setup>
import { ref } from 'vue'

const time = ref('14:30')
</script>

​
With Seconds

<template>
  <v-time-picker
    v-model="time"
    use-seconds
  />
</template>

<script setup>
import { ref } from 'vue'

const time = ref('10:30:45')
</script>

​
Input Variant

<template>
  <v-time-picker
    v-model="time"
    variant="input"
  />
</template>

​
Allowed Times

<template>
  <v-time-picker
    v-model="time"
    :allowed-hours="allowedHours"
    :allowed-minutes="allowedMinutes"
  />
</template>

<script setup>
import { ref } from 'vue'

const time = ref('09:00')

// Only allow business hours (9 AM - 5 PM)
const allowedHours = [9, 10, 11, 12, 13, 14, 15, 16, 17]

// Only allow 15-minute intervals
const allowedMinutes = [0, 15, 30, 45]
</script>

​
Min/Max Time

<template>
  <v-time-picker
    v-model="time"
    min="09:00"
    max="17:00"
  />
</template>

Build docs developers (and LLMs) love

Get started for freeTalk to us