e8-form-datetime-picker
Updated on Sep 18, 2025 18 minutes to readA datetime picker form control for selecting a date and time.
Overview
e8-form-datetime-picker renders an input field that allows users to select both date and time in a single control.
It supports labels, placeholders, tooltips, step intervals for hours, minutes, and seconds, as well as optional display of seconds.
The component provides a popup interface for selecting date and time and supports clearing the value, readonly mode, and configurable popup behavior.
It emits change, focus, and blur events and can be configured to prevent the popup from opening on focus or entirely.
<!-- Basic datetime picker -->
<e8-form-datetime-picker
v-model="vars.datetime"
label="Select Date and Time"
></e8-form-datetime-picker>
<!-- Datetime picker with seconds and custom step intervals -->
<e8-form-datetime-picker
v-model="vars.scheduled"
label="Scheduled Time"
:show-seconds="true"
:hour-step="2"
:minute-step="15"
:second-step="30"
></e8-form-datetime-picker>
<!-- Datetime picker with clear button and disabled popup on focus -->
<e8-form-datetime-picker
v-model="vars.deadline"
label="Deadline"
clear-button
disable-popup-on-focus
></e8-form-datetime-picker>
🔽 Show more
Properties
| Property | Description | Type | Default |
|---|---|---|---|
| clear-button | Shows a button to clear the value. | boolean | false |
| disable-popup | Disables opening the popup. | boolean | false |
| disable-popup-on-focus | Prevents popup from opening when input is focused. | boolean | false |
| format | Custom format for date and time. | string | '' |
| hour-step | Step interval for hours in the time picker. | number | 1 |
| label | Text displayed next to the input. | string | — |
| minute-step | Step interval for minutes in the time picker. | number | 1 |
| placeholder | Placeholder text shown when no value is set. | string | — |
| readonly | Makes the control read-only. | boolean | false |
| second-step | Step interval for seconds in the time picker. | number | 1 |
| show-seconds | Whether to display seconds in the time picker. | boolean | false |
| size | Size of the input. | E8ElementSizes | 'default' |
| v-model | Bound value representing the selected datetime. | E8Timestamp | — |
| visible | Controls the visibility of the input. | boolean | true |