e8-form-time-picker
Updated on Sep 18, 2025 22 minutes to readA time input component with optional pop-up selector and clear button.
Overview
e8-form-time-picker allows users to input time values either by typing or using a pop-up time picker.
It supports lazy updates, clearable input, optional seconds display, and configurable step increments.
<e8-form-time-picker
v-model="vars.startTime"
label="Start Time"
placeholder="HH:mm"
:show-seconds="true"
:clearable="true"
></e8-form-time-picker>
🔽 Show more
Properties
| Property | Description | Type | Default |
|---|---|---|---|
| clearable | Allows clearing the input value. | boolean | false |
| disable-popup | Disables opening the popup time picker. | boolean | false |
| disable-popup-on-focus | Prevents popup from opening on input focus. | boolean | false |
| format | Time format used for display and input. | string | HH:mm:ss |
| hour-step | Increment step for hours in the picker. | number | 1 |
| label | Label text for the input field; set to false to hide label. | string | boolean | — |
| lazy-sync | Updates model only on change or blur instead of every keystroke. | boolean | false |
| max-time | Maximum allowed time. | E8Time | 23:59:59 |
| min-time | Minimum allowed time. | E8Time | 00:00:00 |
| minute-step | Increment step for minutes in the picker. | number | 1 |
| placeholder | Placeholder text displayed when the field is empty. | string | — |
| second-step | Increment step for seconds in the picker. | number | 1 |
| show-seconds | Displays seconds field in the picker. | boolean | false |
| size | Size of the control. | E8ElementSizes | 'default' |
| tooltip | Tooltip text displayed near the input. | string | — |
| v-model | Two-way bound time value. | E8Time | — |
| visible | Controls component visibility. | boolean | true |