# 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.

# Usage

Time pickers have the light theme enabled by default.

# API

v-time-picker

# 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.

# AMPM in title

You can move AM/PM switch to picker’s title.

# 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."

# Disabled

You can’t interact with disabled picker.

# Elevation

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

# 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.

# No title

You can remove picker’s title.

# Range

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

# Read-only

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

# Scrollable

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

# Use seconds

Time picker can have seconds input.

# Width

You can specify allowed the picker’s width or make it full width.