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