e8-form-date-picker
Updated on Sep 18, 2025 4 minutes to readA date picker form control that allows users to select dates using a text input or a popup calendar.
It supports standard input, optional clear and popup buttons, and can be customized with labels, tooltips, date format, and view modes.
Overview
e8-form-date-picker represents a date selection input inside a form.
It allows users to pick a date by typing in a formatted string or using a popup calendar.
The component supports customization of date format and view mode, optional clear and popup buttons, labels, and tooltips.
Visibility, read-only state, and size variants are fully supported.
Change, focus, and blur events are emitted whenever the date value is modified or the input is focused/blurred.
Insert this code into Main or Initialization script of the form to register a global method
E8App.$set(E8App.vars, 'dueDate', '2025-10-31');
E8App.$set(E8App.vars, 'startDate', '2025-11-01');
E8App.$set(E8App.vars, 'endDate', '2025-12-01');Copy this snippet into the Content section
<!-- Default date picker -->
<e8-form-date-picker
v-model="vars.dueDate"
label="Due Date"
></e8-form-date-picker>
<p>Selected date: {{ vars.dueDate }}</p>
<!-- Date picker with clear button and view mode -->
<e8-form-date-picker
v-model="vars.startDate"
label="Start Date"
view-mode="days"
clear-button
></e8-form-date-picker>
<p>Selected start date: {{ vars.startDate }}</p>
<!-- Read-only date picker with tooltip -->
<e8-form-date-picker
v-model="vars.endDate"
label="End Date"
tooltip="Select the end date"
readonly
></e8-form-date-picker>Selected date: {{ vars.dueDate }}
Selected start date: {{ vars.startDate }}
Properties
| Property | Description | Type | Default |
|---|---|---|---|
| clear-button | Shows a button to clear the current date value. | boolean | false |
| disable-popup | Disables opening of the popup calendar. | boolean | false |
| disable-popup-on-focus | Prevents popup from opening on input focus. | boolean | false |
| format | Date format string used for display and input. | string | — |
| label | Text displayed next to the date picker; set to false to hide label. | string | boolean | — |
| placeholder | Placeholder text displayed in the input. | string | — |
| size | Size of the input. | E8ElementSizes | 'default' |
| tooltip | Tooltip text displayed on hover. | string | — |
| v-model | Bound date value. | E8Date | — |
| view-mode | Calendar view mode. | E8DatePickerViewModes | 'days' |
| visible | Controls whether the date picker is visible. | boolean | true |
| readonly | Makes the control read-only. | boolean | false |