# Time pickers
v-time-picker is stand-alone component that can be utilized in many existing Vuetify components. It offers the user a visual representation for selecting the time.
Time pickers have the light theme enabled by default.
# Allowed times
You can specify allowed times using arrays, objects, and functions. You can also specify time step/precision/interval - e.g. 10 minutes.
# AMPM in title
You can move AM/PM switch to picker’s title.
Time picker colors can be set using the
header-color props. If
header-color prop is not provided header will use the
color prop value."
You can’t interact with disabled picker.
v-time-picker component by providing an elevation from 0 to 24. Elevation modifies the
box-shadow css property.
A time picker can be switched to 24hr format. Note that the
format prop defines only the way the picker is displayed, picker’s value (model) is always in 24hr format.
# No title
You can remove picker’s title.
This is an example of joining pickers together using
Read-only picker behaves same as disabled one, but looks like default one.
You can edit time picker’s value using mouse wheel.
# Use seconds
Time picker can have seconds input.
You can specify the picker’s width or make it full width.