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

props

events

Name

allowed-hours

Default

null

Type

function

Components.TimePickers.

Name

allowed-minutes

Default

null

Type

function

Components.TimePickers.

Name

allowed-seconds

Default

null

Type

function

Components.TimePickers.

Name

color

Default

undefined

Type

string

コンポーネントに色を設定します。この色は、定義されている色の名前（例えばsuccessやpurple）や、CSSの色指定（#033やrgba(255, 0, 0, 0.5)）を設定できます。

Name

dark

Default

false

Type

boolean

ダークテーマを適用します。

Name

disabled New in — v1.4

Default

false

Type

boolean

Components.TimePickers.

Name

format

Default

'ampm'

Type

string

Components.TimePickers.

Name

full-width

Default

false

Type

boolean

Components.TimePickers.

Name

header-color

Default

undefined

Type

string

Components.TimePickers.

Name

landscape

Default

false

Type

boolean

Components.TimePickers.

Name

light

Default

false

Type

boolean

ライトテーマを適用します。

Name

max

Default

undefined

Type

string

Components.TimePickers.

Name

min

Default

undefined

Type

string

Components.TimePickers.

Name

no-title

Default

false

Type

boolean

Components.TimePickers.

Name

readonly New in — v1.2

Default

false

Type

boolean

Components.TimePickers.

Name

scrollable

Default

false

Type

boolean

Components.TimePickers.

Name

use-seconds

Default

false

Type

boolean

Components.TimePickers.

Name

value

Default

undefined

Type

any

Components.TimePickers.

Name

width

Default

290

Type

number | string

Components.TimePickers.

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.

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.