Need help with Vue or Nuxt? We build fast apps, custom UI libraries, and help you move to Vue 3 and Nuxt 3 — start with a free 2-week trial.
Talk to an Engineer

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

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

Formatting
#

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

In example bellow (d) => d.toLocaleTimeString() is used.

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

Props #

NameDescriptionTypesDefault
ampm

Use 12-hours time format.

Boolean

false

anchor

String | Object

-

anchorSelector

Anchor CSS selector instead of passing slot

String

""

ariaLabel

The aria-label of the component

String

"$t:selectedTime"

ariaResetLabel

The aria-label of the "reset" button

String

"$t:resetTime"

ariaToggleDropdownLabel

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

String

"$t:toggleDropdown"

autofocus

Boolean

false

autoPlacement

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

Boolean

true

background

The color name of the background color

String

-

cellHeight

Height of the time cell

String | Number

30

child:iconError

Object

-

child:iconLoading

Object

-

child:iconSuccess

Object

-

child:inputLabel

Object

-

clearable

Adds a button to reset the input field value

Boolean

false

clearableIcon

Sets the cleaning button icon.

String

"va-clear"

clearValue

Sets value that should be set after clearing

Date

null

closeOnAnchorClick

Dropdown will be closed when anchor is clicked

Boolean

true

closeOnChange

Boolean

null

closeOnClickOutside

Dropdown will be closed when clicked outside dropdown content and anchor

Boolean

true

closeOnContentClick

Dropdown will be closed when clicked inside dropdown content

Boolean

false

closeOnFocusOutside

Boolean

true

color

Sets input color

String

"primary"

contentClass

String

""

counter

Boolean

-

cursor

Dropdown will be rendered relative to cursor position

Boolean | Object

false

dirty

Sets the dirty state of the component

Boolean

false

disabled

Disable the input

Boolean

false

error

Sets input state to error

Boolean

false

errorCount

Number of error messages displayed

String | Number

1

errorMessages

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

hoursFilter

Function that allows you to hide some specific hours

(date: Date) => boolean

-

hoverOutTimeout

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

Number | String

200

hoverOverTimeout

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

Number | String

30

icon

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

String

"schedule"

immediateValidation

Sets the validation to be performed when the component is mounted

Boolean

false

innerLabel

Boolean

false

inputAriaDescribedby

String

-

inputAriaLabel

String

"$t:inputField"

inputAriaLabelledby

String

-

isContentHoverable

If true, dropdown content will be hoverable

Boolean

true

isOpen

Value for dropdown. If true, then dropdown is shown

Boolean

false

keepAnchorWidth

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

Boolean

false

label

Sets input label

String

""

leftIcon

Sets the icon position to the left.

Boolean

false

loading

Indicates that something is loading (spinner icon).

Boolean

false

manualInput

Allows user to manually input date in VaInput

Boolean

false

messages

Displays a list of messages or message if using a string

Array | String

[]

minutesFilter

Function that allows you to hide some specific minutes

(date: Date) => boolean

-

modelValue

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
]
parse

Custom function that parses text from VaInput

(text: string) => Date

-

periodUpdatesModelValue

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

placeholder

Sets input placeholder

String

""

placement

Sets the placement of the dropdown content. More about placements

String

"bottom-end"

preset

Named preset combination of component props.

String | Array

-

readonly

Puts input in readonly state

Boolean

false

requiredMark

Adds required mark to the label

Boolean

false

role

Sets the role attribute.

String

"button"

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

[]

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

stickToEdges

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 | Array

[
  "click",
  "space",
  "enter",
  "arrow-down",
  "arrow-up"
]
verticalScrollOnOverflow

Boolean

true

view

View specifying which columns will be shown

'hours' | 'minutes' | 'seconds'

"minutes"

visibleCellsCount

Count of time cells to display

String | Number

7

Events #

NameDescription

blur

On blur.

clear

focus

On focus.

update:dirty

Fires when the dirty state changes

update:error

Fires when the error state changes

update:errorMessages

Fires when the error messages change

update:isOpen

update:loading

update:modelValue

The event is triggered when the component needs to change the model. Is also used by v-model and must be listed after the v-model

Slots #

NameDescription

append

appendInner

prepend

prependInner

Change log #

v1.8.0

  • Date input have outlined style by default

  • solid and bordered props moved to preset="solid" and preset="bordered"