VTimePicker API

Props

name	type	default
`allowed-hours`	number[] \| ((val: number) => boolean)	undefined
Restricts which hours can be selected.
`allowed-minutes`	number[] \| ((val: number) => boolean)	undefined
Restricts which minutes can be selected.
`allowed-seconds`	number[] \| ((val: number) => boolean)	undefined
Restricts which seconds can be selected.
`bg-color`	string	undefined
Applies specified color to the control’s background. Used on components that also support the color prop. - supports utility colors with or without `bg-` prefix (for example `success`, `purple` or `bg-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the colors page.
`border`	string \| number \| boolean	false
Applies utility border classes to the component. To use it, you need to omit the `border-` prefix, (for example use `border-sm` as `border="sm"`). Find a list of the built-in border classes on the borders page.
`color`	string	undefined
Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the colors page.
`density` New in v3.11.0	'default' \| 'comfortable' \| 'compact'	'default'
Adjusts the vertical height used by the component.
`disabled`	boolean	false
Removes the ability to click or target the component.
`divided`	boolean	false
Adds a divider between the header and controls.
`elevation`	string \| number	undefined
Designates an elevation applied to the component between 0 and 5. You can find more information on the elevation page.
`format`	'ampm' \| '24hr'	'ampm'
Defines the format of a time displayed in picker. Available options are `ampm` and `24hr`.
`height`	string \| number	undefined
Sets the height for the component.
`hide-header`	boolean	false
Hide the picker header.
`hide-title` New in v3.10.0	boolean	false
Hide the picker title.
`location`	Anchor	undefined
Specifies the component’s location. Can combine by using a space separated string.
`max`	string	undefined
Maximum allowed time.
`max-height`	string \| number	undefined
Sets the maximum height for the component.
`max-width`	string \| number	undefined
Sets the maximum width for the component.
`min`	string	undefined
Minimum allowed time.
`min-height`	string \| number	undefined
Sets the minimum height for the component.
`min-width`	string \| number	undefined
Sets the minimum width for the component.
`model-value`	any	undefined
The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.
`period` New in v3.10.0	'am' \| 'pm'	'am'
Sets period for 12hr format.
`position`	'fixed' \| 'relative' \| 'absolute' \| 'static' \| 'sticky'	undefined
Sets the position for the component.
`readonly`	boolean	false
Puts picker in readonly state.
`rounded`	string \| number \| boolean	undefined
Designates the border-radius applied to the component. This can be 0, xs, sm, true, lg, xl, pill, circle, and shaped. Find more information on available border radius classes on the Border Radius page.
`scrollable`	boolean	false
Allows changing hour/minute with mouse scroll.
`tag`	string \| (new () => any) \| FunctionalComponent	'div'
Specify a custom tag used on the root element.
`theme`	string	undefined
Specify a theme for this component and all of its children.
`tile`	boolean	false
Removes any applied border-radius from the component.
`title`	string	'$vuetify.timePicker.title'
Specify a title text for the component.
`use-seconds`	boolean	false
Toggles the use of seconds in picker.
`variant` New in v3.11.0	'input' \| 'dial'	'dial'
Applies a distinct style to the component.
`view-mode`	'hour' \| 'minute' \| 'second'	'hour'
The current view mode of the picker.`
`width`	string \| number	undefined
Width of the picker.

Events

name	type
`update:hour`	[number]
Emitted when user selects the hour.
`update:minute`	[number]
Emitted when user selects the minute.
`update:modelValue`	[string]
Event that is emitted when the component’s model changes.
`update:period`	['am' \| 'pm']
Emitted when user clicks the AM/PM button.
`update:second`	[number]
Emitted when user selects the second.
`update:viewMode`	['hour' \| 'minute' \| 'second']
Emitted when the view mode changes.

Slots

never

never

never

`actions`
Slot for customizing the content in the actions area
`default`
Displayed below the clock, can be used for example for adding action button (`OK` and `Cancel`)
`title`
Slot for the component’s title content.

SASS Variables

name	default
`$time-picker-ampm-title-font-size`	18px
`$time-picker-clock-center-size`	8px
`$time-picker-clock-end-border-color`	currentColor
`$time-picker-clock-end-border-style`	solid
`$time-picker-clock-end-border-width`	2px
`$time-picker-clock-end-size`	10px
`$time-picker-clock-end-top`	-4px
`$time-picker-clock-hand-height`	calc(50% - 4px)
`$time-picker-clock-hand-left`	calc(50% - 1px)
`$time-picker-clock-hand-width`	2px
`$time-picker-clock-inner-hand-height`	14px
`$time-picker-clock-inner-offset`	27px
`$time-picker-clock-max-width`	290px
`$time-picker-clock-padding`	10px
`$time-picker-controls-ampm-am-border-radius`	4px 4px 0 0
`$time-picker-controls-ampm-btn-height`	80px
`$time-picker-controls-ampm-btn-width`	96px
`$time-picker-controls-ampm-height`	40px
`$time-picker-controls-ampm-pm-border-radius`	0 0 4px 4px
`$time-picker-controls-btn-font`	56px
`$time-picker-controls-btn-height`	80px
`$time-picker-controls-btn-width`	96px
`$time-picker-controls-field-background`	rgb(var(--v-theme-surface-light))
`$time-picker-controls-field-density`	('default': 0, 'comfortable': -4, 'compact': -6)
`$time-picker-controls-field-font`	56px
`$time-picker-controls-field-height`	80px
`$time-picker-controls-field-overlay-opacity`	0.04
`$time-picker-controls-field-width`	96px
`$time-picker-controls-input-ampm-height`	36px
`$time-picker-controls-input-field-font`	44px
`$time-picker-controls-input-field-height`	72px
`$time-picker-controls-input-field-width`	96px
`$time-picker-controls-input-seconds-field-font`	40px
`$time-picker-controls-input-seconds-field-width`	64px
`$time-picker-controls-input-separator-line-height`	64px
`$time-picker-controls-seconds-btn-font`	40px
`$time-picker-controls-seconds-btn-height`	80px
`$time-picker-controls-seconds-btn-width`	64px
`$time-picker-controls-seconds-field-font`	40px
`$time-picker-controls-seconds-field-width`	64px
`$time-picker-controls-separator-line-height`	74px
`$time-picker-controls-separator-width`	24px
`$time-picker-field-label-font-size`	12px
`$time-picker-field-label-letter-spacing`	.0333333333em
`$time-picker-indicator-size`	40px
`$time-picker-landscape-ampm-title-margin`	16px 0 0
`$time-picker-landscape-title-btn-height`	55px
`$time-picker-number-font-size`	16px
`$time-picker-padding`	24px
`$time-picker-width`	328px

#VTimePicker API

VTimePicker API