Time Input
#

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

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

Use 12-hours time format.

Boolean

false

anchor-selector

Anchor CSS selector instead of passing slot

String

""

aria-label

The aria-label of the component

String

"$t:selectedTime"

aria-reset-label

The aria-label of the "reset" button

String

"$t:resetTime"

aria-toggle-dropdown-label

The aria-label of the "toggle dropdown list" button

String

"$t:toggleDropdown"

auto-placement

If dropdown doesn't fit viewport, it will be placed automatically to fit viewport

Boolean

true

background

The color name of the backgound color

String

"background-element"

bordered

Applies underscore

Boolean

false

cell-height

Height of the time cell

Number

30

clear-value

Sets value that should be set after clearing

Date

-

clearable

Adds a button to reset the input field value

Boolean

false

clearable-icon

Sets the cleaning button icon.

String

"va-clear"

close-on-anchor-click

Dropdown will be closed when anchor is clicked

Boolean

true

close-on-click-outside

Dropdown will be closed when clicked outside dropdown content and anchor

Boolean

true

close-on-content-click

Dropdown will be closed when clicked inside dropdown content

Boolean

false

color

Sets input color

String

"primary"

cursor

Dropdown will be rendered relative to cursor position

Boolean

false

disabled

Disable the input

Boolean

false

error

Sets input state to error

Boolean

-

error-count

Number of error messages displayed

String | Number

1

error-messages

Displays a list of error messages or message if using a string

Array | String

-

format

Custom function that format model value as input text

(date: Date) => string

-

framed

Adds borders to center of the picker

Boolean

false

hide-period-switch

Hide period column

Boolean

false

hours-filter

Function that allows you to hide some specific hours

Function

-

hoursFilter

Function that allows you to hide some specific hours

(date: Date) => boolean

hover-out-timeout

Time in ms after mouse leave dropdown before it will be closed

Number

200

hover-over-timeout

Time in ms after mouse enter dropdown before it will be opened

Number

30

icon

Sets an icon. The default icon position is on the right

String

"schedule"

immediate-validation

Sets the validation to be performed when the component is mounted

Boolean

false

is-content-hoverable

If true, dropdown content will be hoverable

Boolean

true

is-open

Value for dropdown. If true, then dropdown is shown

Boolean

-

keep-anchor-width

If true, dropdown content will have exact same width as anchor

Boolean

false

label

Sets input label

String

""

left-icon

Sets the icon position to the left.

Boolean

false

loading

Indicates that something is loading (spinner icon).

Boolean

false

manual-input

Allows user to manually input date in VaInput

Boolean

false

messages

Displays a list of messages or message if using a string

Array | String

[]

minutes-filter

Function that allows you to hide some specific minutes

Function

-

minutesFilter

Function that allows you to hide some specific minutes

(date: Date) => boolean

model-value

The value of the v-model bindings.

Date

-

name

Applies name to internal input component. Useful for native forms.

String

-

offset

Dropdown content will be moved by main and cross axis according to current placement

Array | Number

[
  2,
  0
]
outline

Removes background.

Boolean

false

parse

Custom function that parses text from VaInput

(text: string) => Date

-

period-updates-model-value

If user will change period it will automatically update model value. You can turn off it and am/pm switch will only change view.

Boolean

true

placement

Sets the placement of the dropdown content. More about placements

String

"bottom-start"

preset

Named preset combination of component props.

String

-

prevent-overflow

If true, dropdown will be teleported to target ignoring overflow: hidden on relative position elements.

Boolean

false

readonly

Puts input in readonly state

Boolean

false

required-mark

Adds required mark to the label

Boolean

false

rules

Accepts an array of functions that take an input value as an argument and return either true / false or a string with an error message

Array

[]

seconds-filter

Function that allows you to hide some specific seconds

Function

-

secondsFilter

Function that allows you to hide some specific seconds

(date: Date) => boolean

stateful

Add possibility to work with component without setting v-model.

Boolean

false

stick-to-edges

Dropdown will not be rendered outside of viewport. It will be moved in opposite direction.

Boolean

false

success

Sets input state to success

Boolean

false

target

Navigation target, More info here.

String | Object

-

teleport

Element where content will be rendered

String | Object

-

trigger

Action that will triggered when open and close dropdown.

String

"click"

view

View specifying which columns will be shown

'hours' | 'minutes' | 'seconds'

"minutes"

visible-cells-count

Count of time cells to display

Number

7

Events #

NameDescription

blur

On blur.

clear

focus

On focus.

update-error

update-error-messages

update-is-open

update-model-value

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)