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.
Select your desired component from below and see the available props, slots, events and functions.
Below is a collection of simple to complex examples.
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.
Read-only picker behaves same as disabled one, but looks like default one.
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.
You can specify allowed times using arrays, objects, and functions. You can also specify time step/precision/interval - e.g. 10 minutes.
You can specify allowed the picker's width or make it full width.
v-time-picker component by providing an elevation from 0 to 24. Elevation modifies the
box-shadow css property.
You can move AM/PM switch to picker's title.
You can remove picker's title.
Time picker can have seconds input.
You can edit time picker's value using mouse wheel.
This is an example of joining pickers together using
Ready for more? Continue reading with: