The 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.
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 color and 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.
Emphasize the 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 min and max prop.
Ready for more? Continue reading with: