Time picker
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.
API
Restricts which hours can be selected
Restricts which minutes can be selected
Restricts which seconds can be selected
Applies specified color to the control - it can be the name of material color (for example success or purple) or css color (#033 or rgba(255, 0, 0, 0.5))
Applies the dark theme variant
disables picker
Defines the format of a time displayed in picker. Available options are ampm and 24hr.
Forces 100% width
Defines the header color. If not specified it will use the color defined by color prop or the default picker color
Orients picker horizontal
Applies the light theme variant
Maximum allowed time
Minimum allowed time
Hide the picker title
Puts picker in readonly state
Allows changing hour/minute with mouse scroll
Toggles the use of seconds in picker
Time picker model (ISO 8601 format, 24hr hh:mm)
The width of the content
Examples
Time pickers - Colors
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.
Time pickers - In dialog and menu
Due to the flexibility of pickers, you can really dial in the experience exactly how you want it.
Time pickers - 24h format
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.
Time pickers - Allowed times
You can specify allowed times using arrays, objects, and functions. You can also specify time step/precision/interval - e.g. 10 minutes.
Time pickers - Setting picker width
You can specify allowed the picker's width or make it full width.