Official Partner of
Nuxt
๐Ÿ”ฅ๐Ÿ”ฅ๐Ÿ”ฅ Hire us

Time Input
#

Time Input component is a combination of Time Picker and Input components. You can find usage examples using following links:

Time Picker

Input

Examples
#

Default
#

Open in GitHub

Formatting
#

We format input text specific to view prop. You can pass custom format function that accepts Date and return string.

Default format function
Custom format function
(d) => d.toLocaleTimeString()
Open in GitHub

Parsing
#

Default parse time function likely cover all of your needs, but you can provide your own parse function using parseTime prop.

Open in GitHub

AM PM
#

VaTimeInput will automatically format input string if you need to use AM PM.

Open in GitHub

Clearable
#

The clearable prop adds a button to the right to clear the input. Prop clearableIcon sets the custom clear icon.

Open in GitHub

Validation
#

Validation works the same way as VaInput validation, except rules functions should accept Date instead of string.

Open in GitHub

Props #

NameDescriptionTypesDefault
ampm

Boolean

false

anchorSelector

String

""

ariaLabel

String

"$t:selectedTime"

ariaResetLabel

String

"$t:resetTime"

ariaToggleDropdownLabel

String

"$t:toggleDropdown"

autoPlacement

Boolean

true

background

String

"background-element"

bordered

Boolean

false

cellHeight

Number

30

clearable

Boolean

false

clearableIcon

String

"va-clear"

clearValue

Date

-

closeOnAnchorClick

Boolean

true

closeOnClickOutside

Boolean

true

closeOnContentClick

Boolean

false

color

String

"primary"

cursor

Boolean

false

disabled

Boolean

false

error

Boolean

-

errorCount

String | Number

1

errorMessages

Array | String

-

format

Function

-

format

Custom function that format model value as input text

(date: Date) => string

framed

Boolean

false

hidePeriodSwitch

Boolean

false

hoursFilter

Function

-

hoursFilter

Function that allows you to hide some specific hours

(date: Date) => boolean

hoverOutTimeout

Number

200

hoverOverTimeout

Number

30

icon

String

"schedule"

immediateValidation

Boolean

false

isContentHoverable

Boolean

true

isOpen

Boolean

-

keepAnchorWidth

Boolean

false

label

String

""

leftIcon

Boolean

false

loading

Boolean

false

manualInput

Boolean

false

messages

Array | String

[]

minutesFilter

Function

-

minutesFilter

Function that allows you to hide some specific minutes

(date: Date) => boolean

modelValue

Date

-

name

String

-

offset

Array | Number

[
  2,
  0
]
outline

Boolean

false

parse

Function

-

parse

Custom function that parses text from VaInput

(text: string) => Date

periodUpdatesModelValue

Boolean

true

placement

String

"bottom-start"

preset

String

-

preventOverflow

Boolean

false

readonly

Boolean

false

requiredMark

Boolean

false

rules

Array

[]

secondsFilter

Function

-

secondsFilter

Function that allows you to hide some specific seconds

(date: Date) => boolean

stateful

Boolean

false

stickToEdges

Boolean

false

success

Boolean

false

target

String | Object

-

teleport

String | Object

-

trigger

String

"click"

view

String

"minutes"

view

View specifying which columns will be shown

'hours' | 'minutes' | 'seconds'

visibleCellsCount

Number

7

Events #

NameDescription

blur

On blur.

clear

focus

On focus.

update:error

update:errorMessages

update:isOpen

update:modelValue

The event is triggered when the component needs to change the model. Is also used by v-model

Slots #

NameDescription

append

appendInner

prepend

prependInner

Css Variables #

NameDefault Value
--va-time-input-min-width var(--va-form-element-min-width)