BlogPlaygroundOne

VTimePickerClock API


Props
name
type
default
(value: number) => boolean
undefined

Restricts which hours can be selected.

boolean
false

Displays time in a 12-hour format.

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.

boolean
false

Removes the ability to click or target the component.

any
undefined

Used to display a custom value on the clock.

boolean
false

If set, this probably indicates a double rotation or a mode where more than one set of values (like hours and minutes) is displayed on the clock at the same time.

Function
undefined

Specifies the format of the displayed time, either 12-hour or 24-hour, depending on the component’s setup.

number
undefined

Defines the maximum time value that can be selected.

number
undefined

Defines the minimum time value that can be selected.

number
undefined

The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.

boolean
false

When true, the picker is in a read-only state, and users cannot modify the selected time.

number
0

Controls rotation, specifying the degree of rotation for the clock hands.

boolean
false

Allows the time selection to be scrollable, enhancing user experience for devices with scroll inputs.

number
1

Defines the increments between selectable times, such as a step of 1 for every minute or a larger step for every 5 or 15 minutes.

Events
name
type
[number]

The event that is triggered when the selected time is changed.

[number]

The updated bound model.

Slots
never

The default Vue slot.