Components/Form components

EDatePickerPanel Date picker panel

import EUI 1.0

Examples

Date picker panel

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Column { width: Math.min(640, parent.width) spacing: 16 EDatePickerPanel { type: "daterange" disabledDate: function(date) { return date.getDay() === 0 } } }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Keyboard navigation, range preview and custom cells

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Item { width: Math.min(760, parent.width) height: 640 Column { width: parent.width - 48 spacing: 16 anchors.centerIn: parent EDatePickerPanel { id: webDatesPanel year: 2026 month: 9 type: "daterange" showWeekNumber: true width: Math.min(330, parent.width) cellComponent: webDatesCell objectName: "webDatesPanel" disabledDate: function(date) { return date.getDay() === 0 || date.getDay() === 6 } } Component { id: webDatesCell EText { text: parent.cellData.text font.bold: parent.cellData.isSelected horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter } } ETextButton { text: qsTr("Clear range") onClicked: webDatesPanel.value = [] } } }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Standalone panel

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EDatePickerPanel { value: "2026-10-10" }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Properties

PropertyDescriptionValues and default

calendarLocalevar

Locale used for date/time parsing, formatting and panels.

Default

Show default value

Qt.locale(PickerFormats.localeName( EControlConfig.valueFor(control, "locale", ELocale.language), ELocale.language ))

cellComponentComponent

Component slot for custom table cell or date cell; null uses the default content. See this page’s examples for delegate context.

Defaultnull

disabledDatevar

Date disabling callback receiving a JavaScript Date and returning whether it is disabled.

Defaultnull

enabledbool

Allow interaction; false disables the control.

Defaulttrue

fixedViewbool

Lock the date panel view instead of switching levels through its title.

Defaultfalse

focusedDatedate

Date focused by keyboard navigation in the date panel.

Defaultnew Date(year, month, 1)

heightreal

Component size in pixels; may be bound to its parent layout.

DefaultimplicitHeight

hoverValuestring

Hovered date or rating used for preview.

Default""

maxDatestring

Selectable date bounds in yyyy-MM-dd; an empty string imposes no bound.

Default""

minDatestring

Selectable date bounds in yyyy-MM-dd; an empty string imposes no bound.

Default""

monthint

Displayed month from 1 to 12.

Defaultnew Date().getMonth()

nextMonthIconint

Icon used by the component.

EIcons.*
0 (no icon)

DefaultEIcons.CHEVRON_RIGHT

nextYearIconint

Icon used by the component.

EIcons.*
0 (no icon)

DefaultEIcons.CHEVRONS_RIGHT

prevMonthIconint

Icon used by the component.

EIcons.*
0 (no icon)

DefaultEIcons.CHEVRON_LEFT

prevYearIconint

Icon used by the component.

EIcons.*
0 (no icon)

DefaultEIcons.CHEVRONS_LEFT

rangeStartstring

Start of the date range being selected.

Default""

showConfirmbool

Show the confirm button.

Defaultfalse

showFooterbool

Show the footer action area.

Defaulttrue

showWeekNumberbool

Show week numbers.

Defaultfalse

sizeint

Control size; inherits the nearest EConfigProvider by default.

EStyle.Small
EStyle.Medium
EStyle.Large

DefaultInherited; EStyle.Medium by default

typestring

Date selection unit and single, multiple or range selection mode.

"date" / "dates"
"week" / "month"
"months" / "year"
"years" / "quarter"
"quarters" / "daterange"
"monthrange" / "yearrange"
"quarterrange"

Default"date"

valuevar

Selected date in yyyy-MM-dd; month, year or range panels use the corresponding format.

Default""

viewModestring

Date level currently displayed in the panel.

"date" / "month"
"year"

Default

Show default value

type.indexOf("year") === 0 ? "year" : type.indexOf("month") === 0 || type.indexOf("quarter") === 0 ? "month" : "date"

visiblebool

Whether the component is visible.

Defaulttrue

widthreal

Component size in pixels; may be bound to its parent layout.

DefaultimplicitWidth

yearint

Displayed year.

Defaultnew Date().getFullYear()

periodViewboolRead only

Whether the date panel shows month or year periods.

DefaultComputed at runtime

selectedDatevarRead only

Current selected Date parsed by the date panel.

DefaultComputed at runtime

Signals

SignaturePurpose

picked(var value)

Emitted after choosing a value; value is the chosen value.

calendarChanged(var value)

Emitted when the calendar selection changes; value is the current selection.

panelChanged(var date, string mode)

Emitted when the calendar view changes; date is the displayed date and mode is the view mode.

Methods

SignaturePurpose

focusCalendar()

Move keyboard focus to the calendar.

setView(date)

Change the displayed calendar position to date.

shiftMonth(offset)

Shift the displayed calendar by offset months; negative values move backward.

selectDate(date)

Select the date specified by input.

navigate(offset)

Navigate to the specified step or relative time range.