Date Picker
The e-date-picker component handles day, month, and year selection with keyboard-friendly navigation, controlled view state, highlighted ranges, and disabled-date rules.
Use this page to validate scheduling flows, compare navigation modes, and wire constrained date selection into production forms with predictable behavior.
Usage
Explore how color, elevation, landscape, grid-button-elevation, and no-title shape Date Picker, and preview their combined effect before applying the configuration in your interface.
Disabled and highlighted dates
Use disabled rules to prevent unavailable dates from being selected, and highlighted rules to emphasize important dates or scheduling windows without blocking them.
Blocked scheduling rules
Blocks weekends and August 20-25.
Visible scheduling windows
Marks releases and the approval window.
Internationalization
Use lng to render calendar labels, month names, and weekdays in a language that differs from the application's global locale.
Spanish calendar
Calendar labels and month names are displayed in Spanish.
French calendar
Calendar labels and month names are displayed in French.
Integration
Combine Date Picker with a read-only ETextfield and display it in an EDialog or EMenu. The close-on-change prop closes the active surface after selection.
Props
Use the API table as the source of truth for accepted types, defaults, and the main scheduling behaviors exposed by Date Picker.
| Property | Type | Default |
|---|---|---|
| modelValue | Date | string | undefined |
Current selected date value. Accepts Date or a date-like string that can be normalized by the component. | ||
| view | datePickerViewType | undefined |
Controls the active navigation depth. Pair with update:view for a fully controlled picker. | ||
| disabled / highlighted | DatesConfiguration | undefined / undefined |
Date configuration objects used to block selection and emphasize important dates or ranges. | ||
| weekStart | number | 1 |
Sets the first visible day of the week, where 0 is Sunday and 1 is Monday. | ||
| format | string | undefined |
Custom header format token string used for the main title date output. | ||
| lng | suportedLng | global locale |
Overrides the locale used to resolve month and weekday names for this picker instance. | ||
| landscape | boolean | false |
Switches the picker to its horizontal landscape layout. | ||
| noTitle | boolean | false |
Hides the upper title block that displays the selected year and formatted date. | ||
| onlyMonth / onlyYear | boolean | false / false |
Restricts navigation to month-only or year-only selection flows. | ||
| closeOnChange | boolean | false |
Closes the surrounding dialog or menu container immediately after a valid selection. | ||
| iconPrev / iconNext | string | IconPath | IconPath[] | undefined |
Replaces the previous and next navigation icons in the header. | ||
| color | string | "primary" |
Base semantic color applied to selected and highlighted picker states. | ||
| elevation / gridButtonElevation | ElevationLevel | undefined / undefined |
Applies elevation to the picker surface and selected grid buttons. | ||