BlogPlaygroundOne

Time pickers

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.

Edit this page
Copy Page as Markdown

Usage

Time pickers have the light theme enabled by default.

Select Time
:
12
1
2
3
4
5
6
7
8
9
10
11
<v-time-picker></v-time-picker>
ads via vuetify

API

ComponentDescription
v-time-pickerPrimary Component
Toggle Inline API

Examples

Props

Allowed times

You can specify allowed times using arrays, objects, and functions. You can also specify time step/precision/interval - e.g. 10 minutes.

Select Time
:
0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
Select Time
:
0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

Colors

Time picker colors can be set using the color prop.

Select Time
:
12
1
2
3
4
5
6
7
8
9
10
11
Select Time
:
12
1
2
3
4
5
6
7
8
9
10
11

Disabled

You can’t interact with disabled picker.

Select Time
:
12
1
2
3
4
5
6
7
8
9
10
11
Select Time
:
12
1
2
3
4
5
6
7
8
9
10
11

Elevation

Emphasize the v-time-picker component by providing an elevation from 0 to 5. Elevation modifies the box-shadow css property.

Select Time
:
12
1
2
3
4
5
6
7
8
9
10
11

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.

Select Time
:
0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

No header

You can remove picker’s header.

12
1
2
3
4
5
6
7
8
9
10
11

Range

This is an example of joining pickers together using min and max prop.

Plan your event:

Start:

Select Time
:
12
1
2
3
4
5
6
7
8
9
10
11

End:

Select Time
:
12
1
2
3
4
5
6
7
8
9
10
11

Read-only

Read-only picker behaves same as disabled one, but looks like default one.

Select Time
:
12
1
2
3
4
5
6
7
8
9
10
11

Scrollable

You can edit time picker’s value using mouse wheel.

Select Time
:
12
1
2
3
4
5
6
7
8
9
10
11

Use seconds

Time picker can have seconds input.

Select Time
:
:
12
1
2
3
4
5
6
7
8
9
10
11

Misc

Dialog and menu

Due to the flexibility of pickers, you can really dial in the experience exactly how you want it.

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.
Buttons
Components
Date pickers
Components
Text fields
Components