e8-date-picker
Updated on Sep 18, 2025 4 minutes to readA versatile and interactive calendar component for selecting a single date.
Overview
e8-date-picker provides a user-friendly interface for choosing a single date.
It displays a navigable calendar that supports switching between day, month, and year views, and includes quick navigation controls such as Today, Previous, and Next.
Selected date: {{ vars.selectedDate }}
<e8-date-picker
view-mode="days"
v-model="vars.selectedDate"
></e8-date-picker>
<div>Selected date: {{ vars.selectedDate }}</div>
🔽 Show more
Properties
| Property | Description | Type | Default |
|---|---|---|---|
| v-model | Selected date, or an object with start and end dates in range mode. | E8Date | object | '' |
| view-mode | Initial display mode of the calendar (days, months, or years). | E8DatePickerViewModes | 'days' |
| min-date | Earliest selectable date, inclusive, in YYYY-MM-DD format. | E8Date | null | null |
| max-date | Latest selectable date, inclusive, in YYYY-MM-DD format. | E8Date | null | null |