e8-time-picker
Updated on Sep 18, 2025 2 minutes to readAn interactive time selection component with customizable visibility for hours, minutes, seconds, and AM/PM fields.
Overview
e8-time-picker allows users to select or adjust time values using increment and decrement controls.
It supports flexible configuration of visible fields, adjustable step sizes, and both 12-hour and 24-hour display modes.
<e8-time-picker
v-model="vars.selectedTime"
:show-seconds="false"
minute-step="5"
></e8-time-picker>
<div>Selected time: {{ vars.selectedTime }}</div>
🔽 Show more
Selected time: {{ vars.selectedTime }}
| Property | Description | Type | Default |
|---|---|---|---|
| hour-step | Step size used when incrementing or decrementing hours. | number | 1 |
| minute-step | Step size used when incrementing or decrementing minutes. | number | 1 |
| second-step | Step size used when incrementing or decrementing seconds. | number | 1 |
| show-am-pm | Toggles display of AM/PM control for 12-hour format. | boolean | true |
| show-hours | Toggles visibility of the hours field. | boolean | true |
| show-minutes | Toggles visibility of the minutes field. | boolean | true |
| show-seconds | Toggles visibility of the seconds field. | boolean | true |
| v-model | Two-way bound string value representing the selected time. | string | — |