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.

Usage

Time pickers have the light theme enabled by default.


API

v-time-picker
Name
allowed-hours
Default
null
Type
function

Restricts which hours can be selected

Name
allowed-minutes
Default
null
Type
function

Restricts which minutes can be selected

Name
color
Default
undefined
Type
string

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))

Name
dark
Default
false
Type
boolean

Applies the dark theme variant

Name
format
Default
'ampm'
Type
string

Defines the format of a time displayed in picker. Available options are ampm and 24hr.

Name
full-width
Default
false
Type
boolean

Forces 100% width

Name
header-color
Default
undefined
Type
string

Defines the header color. If not specified it will use the color defined by color prop or the default picker color

Name
landscape
Default
false
Type
boolean

Orients picker horizontal

Name
light
Default
false
Type
boolean

Applies the light theme variant

Name
max
Default
undefined
Type
string

Maximum allowed time

Name
min
Default
undefined
Type
string

Minimum allowed time

Name
no-title
Default
false
Type
boolean

Hide the picker title

Name
readonly
Default
false
Type
boolean
Name
scrollable
Default
false
Type
boolean

Allows changing hour/minute with mouse scroll

Name
value
Default
undefined
Type
any

Time picker model (ISO 8601 format, 24hr hh:mm)

Name
width
Default
290
Type
number | string

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.