Time Input #
Time Input component is a combination of Time Picker and Input components. You can find usage examples using following links:
Examples #
Default #
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()
Parsing #
Default parse time function likely cover all of your needs, but you can provide your own parse function using parseTime
prop.
It can parse such inputs: 11, 11:00, 11:00:00, 11 pm, 23, 2300, 11.00, 11somejunk00
AM PM #
VaTimeInput will automatically format input string if you need to use AM PM.
Clearable #
The clearable
prop adds a button to the right to clear the input. Prop clearableIcon
sets the custom clear icon.
Validation #
Validation works the same way as VaInput
validation, except rules functions should accept Date
instead of string.
Props #
Name | Description | Types | Default |
---|---|---|---|
ampm |
|
| |
anchorSelector |
|
| |
ariaLabel |
|
| |
ariaResetLabel |
|
| |
ariaToggleDropdownLabel |
|
| |
autoPlacement |
|
| |
background |
|
| |
bordered |
|
| |
cellHeight |
|
| |
clearable |
|
| |
clearableIcon |
|
| |
clearValue |
| - | |
closeOnAnchorClick |
|
| |
closeOnClickOutside |
|
| |
closeOnContentClick |
|
| |
color |
|
| |
cursor |
|
| |
disabled |
|
| |
error |
| - | |
errorCount |
|
| |
errorMessages |
| - | |
format |
| - | |
format | Custom function that format model value as input text |
| |
framed |
|
| |
hidePeriodSwitch |
|
| |
hoursFilter |
| - | |
hoursFilter | Function that allows you to hide some specific hours |
| |
hoverOutTimeout |
|
| |
hoverOverTimeout |
|
| |
icon |
|
| |
immediateValidation |
|
| |
isContentHoverable |
|
| |
isOpen |
| - | |
keepAnchorWidth |
|
| |
label |
|
| |
leftIcon |
|
| |
loading |
|
| |
manualInput |
|
| |
messages |
|
| |
minutesFilter |
| - | |
minutesFilter | Function that allows you to hide some specific minutes |
| |
modelValue |
| - | |
name |
| - | |
offset |
|
| |
outline |
|
| |
parse |
| - | |
parse | Custom function that parses text from VaInput |
| |
periodUpdatesModelValue |
|
| |
placement |
|
| |
preset |
| - | |
preventOverflow |
|
| |
readonly |
|
| |
requiredMark |
|
| |
rules |
|
| |
secondsFilter |
| - | |
secondsFilter | Function that allows you to hide some specific seconds |
| |
stateful |
|
| |
stickToEdges |
|
| |
success |
|
| |
target |
| - | |
teleport |
| - | |
trigger |
|
| |
view |
|
| |
view | View specifying which columns will be shown |
| |
visibleCellsCount |
|
|
Events #
Name | Description |
---|---|
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 |
Slots #
Name | Description |
---|---|
append | |
appendInner | |
prepend | |
prependInner |
Css Variables #
Name | Default Value |
---|---|
--va-time-input-min-width | var(--va-form-element-min-width) |