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 | Use 12-hours time format. |
|
|
anchor-selector | Anchor CSS selector instead of passing slot |
|
|
aria-label | The aria-label of the component |
|
|
aria-reset-label | The aria-label of the "reset" button |
|
|
aria-toggle-dropdown-label | The aria-label of the "toggle dropdown list" button |
|
|
auto-placement | If dropdown doesn't fit viewport, it will be placed automatically to fit viewport |
|
|
background | The color name of the backgound color |
|
|
bordered | Applies underscore |
|
|
cell-height | Height of the time cell |
|
|
clear-value | Sets value that should be set after clearing |
| - |
clearable | Adds a button to reset the input field value |
|
|
clearable-icon | Sets the cleaning button icon. |
|
|
close-on-anchor-click | Dropdown will be closed when anchor is clicked |
|
|
close-on-click-outside | Dropdown will be closed when clicked outside dropdown content and anchor |
|
|
close-on-content-click | Dropdown will be closed when clicked inside dropdown content |
|
|
color | Sets input color |
|
|
cursor | Dropdown will be rendered relative to cursor position |
|
|
disabled | Disable the input |
|
|
error | Sets input state to error |
| - |
error-count | Number of error messages displayed |
|
|
error-messages | Displays a list of error messages or message if using a string |
| - |
format | Custom function that format model value as input text |
| - |
framed | Adds borders to center of the picker |
|
|
hide-period-switch | Hide period column |
|
|
hours-filter | Function that allows you to hide some specific hours |
| - |
hoursFilter | Function that allows you to hide some specific hours |
| |
hover-out-timeout | Time in |
|
|
hover-over-timeout | Time in |
|
|
icon | Sets an icon. The default icon position is on the right |
|
|
immediate-validation | Sets the validation to be performed when the component is mounted |
|
|
is-content-hoverable | If true, dropdown content will be hoverable |
|
|
is-open | Value for dropdown. If |
| - |
keep-anchor-width | If true, dropdown content will have exact same width as anchor |
|
|
label | Sets input label |
|
|
left-icon | Sets the icon position to the left. |
|
|
loading | Indicates that something is loading (spinner icon). |
|
|
manual-input | Allows user to manually input date in VaInput |
|
|
messages | Displays a list of messages or message if using a string |
|
|
minutes-filter | Function that allows you to hide some specific minutes |
| - |
minutesFilter | Function that allows you to hide some specific minutes |
| |
model-value | The value of the |
| - |
name | Applies |
| - |
offset | Dropdown content will be moved by main and cross axis according to current |
|
|
outline | Removes background. |
|
|
parse | Custom function that parses text from VaInput |
| - |
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. |
|
|
placement | Sets the placement of the dropdown content. More about placements |
|
|
preset | Named preset combination of component props. |
| - |
prevent-overflow | If true, dropdown will be teleported to target ignoring |
|
|
readonly | Puts input in readonly state |
|
|
required-mark | Adds required mark to the label |
|
|
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 |
|
|
seconds-filter | Function that allows you to hide some specific seconds |
| - |
secondsFilter | Function that allows you to hide some specific seconds |
| |
stateful | Add possibility to work with component without setting |
|
|
stick-to-edges | Dropdown will not be rendered outside of viewport. It will be moved in opposite direction. |
|
|
success | Sets input state to success |
|
|
target | Navigation target, More info here. |
| - |
teleport | Element where content will be rendered |
| - |
trigger | Action that will triggered when open and close dropdown. |
|
|
view | View specifying which columns will be shown |
|
|
visible-cells-count | Count of time cells to display |
|
|
Events #
Name | Description |
---|---|
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 |
Slots #
Name | Description |
---|---|
append | |
appendInner | |
prepend | |
prependInner |
Css Variables #
Name | Default Value |
---|---|
--va-time-input-min-width | var(--va-form-element-min-width) |