Components/Form components

EDateTimePicker Date time picker

import EUI 1.0

Examples

Date time picker

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 EDateTimePicker { isRange: true minDate: "2026-01-01" maxDate: "2026-12-31" value: ["2026-10-10 09:00:00", "2026-10-11 18:00:00"] } }

Preview

Run the code to try the component

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

Code runs in this browser Licenses

Default times and date-time ranges

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 EDateTimePicker { id: webDatesDateTime isRange: true readOnly: false format: "DD/MM/YYYY HH:mm" dateFormat: "DD/MM/YYYY" timeFormat: "hh:mm A" width: Math.min(460, parent.width) objectName: "webDatesDateTime" defaultValue: [new Date(2026, 9, 11), new Date(2026, 10, 11)] defaultTime: [new Date(2000, 0, 1, 9, 30), new Date(2000, 0, 1, 18, 45)] } EText { width: parent.width wrapMode: Text.WordWrap text: qsTr("Date and time: ") + JSON.stringify(webDatesDateTime.value) } } }

Preview

Run the code to try the component

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

Code runs in this browser Licenses

Date and time

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EDateTimePicker { value: "2026-10-10 09:30:00" }

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

accessibleNamestring

Name read by assistive technologies; provide a readable name for controls without text.

DefaultplaceholderText

appendComponentComponent

Component slot for custom input append area or list end; null uses the default content. See this page’s examples for delegate context.

Defaultnull

arrowControlbool

Adjust time fields with up/down arrows.

Defaulttrue

cellComponentComponent

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

Defaultnull

clearIconint

Icon used by the component.

EIcons.*
0 (no icon)

DefaultEIcons.CIRCLE_XMARK

clearablebool

Show a clear action; ratings may be cleared by clicking the current score again.

Defaulttrue

dateFormatstring

Date or time display format pattern.

Default"YYYY-MM-DD"

defaultTimevar

Default time for date-time selection, as a Date or start/end time array.

Defaultnull

defaultValuevar

Default panel position when no value is selected.

Defaultnull

disabledDatevar

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

Defaultnull

disabledHoursvar

Callback returning disabled hours.

Defaultnull

disabledMinutesvar

Callback returning disabled minutes for the selected hour.

Defaultnull

disabledSecondsvar

Callback returning disabled seconds for the selected hour and minute.

Defaultnull

echoModeenum

Display mode for the input text.

TextInput.Normal
TextInput.Password
TextInput.NoEcho
TextInput.PasswordEchoOnEdit

DefaultDynamic binding

emptyValuesvar

Values treated as empty; includes undefined, null and the empty string by default.

DefaultInherited; default [undefined, null, ""]

enabledbool

Allow interaction; false disables the control.

Defaulttrue

endPlaceholderstring

Placeholder shown when the value is empty.

Default""

fallbackPlacementsvar

Alternative popup placements when the preferred position lacks space.

Array of the available placement values

Default["top-start", "bottom-start"]

fontfont

Font settings for the family, size and text style.

Common fields:
family, pixelSize, pointSize
bold, italic, weight
underline, strikeout
letterSpacing, wordSpacing

Defaultapplication font

formatstring

Display format: date/time pattern, progress callback or countdown time placeholders.

Default"YYYY-MM-DD HH:mm:ss"

formattervar

Formatting callback converting a value to displayed text.

Defaultnull

heightreal

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

DefaultimplicitHeight

isRangebool

Enable start/end range selection.

Defaultfalse

maxDatestring

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

Default""

maxTimestring

Selectable time bounds in HH:mm or HH:mm:ss; empty means unbounded.

Default""

maximumLengthint

Maximum allowed input characters.

Default32767

minDatestring

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

Default""

minTimestring

Selectable time bounds in HH:mm or HH:mm:ss; empty means unbounded.

Default""

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

parservar

Input parser converting displayed text to the underlying value.

Defaultnull

passwordVisiblebool

Display the password as plain text.

Defaultfalse

placeholderTextstring

Placeholder shown when the value is empty.

DefaultLocalized text

placementstring

Picker panel position relative to the input.

"top" / "top-start"
"top-end" / "bottom"
"bottom-start" / "bottom-end"
"left" / "left-start"
"left-end" / "right"
"right-start" / "right-end"

Default"bottom-start"

prefixComponentComponent

Component slot for custom prefix; null uses the default content. See this page’s examples for delegate context.

Defaultnull

prefixIconint

Icon used by the component.

EIcons.*
0 (no icon)

DefaultEIcons.CALENDAR

prependComponentComponent

Component slot for custom input prepend area; null uses the default content. See this page’s examples for delegate context.

Defaultnull

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

rangeSeparatorstring

Separator text between range values.

Default" — "

readOnlybool

Prevent user editing or rating while allowing programmatic value changes.

Defaulttrue

shortcutsvar

Array of date shortcut data.

Fields:
text, value

Default[]

showConfirmbool

Show the confirm button.

Defaulttrue

showFooterbool

Show the footer action area.

Defaulttrue

showNowbool

Show an action to select the current time.

Defaulttrue

showPasswordbool

Enable password entry and visibility switching.

Defaultfalse

showWeekNumberbool

Show week numbers.

Defaultfalse

showWordLimitbool

Show the current character count and length limit.

Defaultfalse

singlePanelbool

Show a single date panel for range selection.

Defaultfalse

sizeint

Control size; inherits the nearest EConfigProvider by default.

EStyle.Small
EStyle.Medium
EStyle.Large

DefaultInherited; EStyle.Medium by default

startPlaceholderstring

Placeholder shown when the value is empty.

Default""

styleTypeint

Semantic color style.

EStyle.Default
EStyle.Primary
EStyle.Success
EStyle.Info
EStyle.Warning
EStyle.Danger

DefaultEStyle.Primary

suffixComponentComponent

Component slot for custom suffix; null uses the default content. See this page’s examples for delegate context.

Defaultnull

suffixIconint

Icon used by the component.

EIcons.*
0 (no icon)

Default0

textstring

Displayed text.

Default

Show default value

Array.isArray(value) ? value.map(displayValue).join(rangeSeparator) : displayValue(value)

textColorcolor

Text color.

DefaultDynamic binding

timeFormatstring

Date or time display format pattern.

Default"HH:mm:ss"

unlinkPanelsbool

Allow range date panels to navigate independently.

Defaultfalse

validateEventbool

Request enclosing-form validation when the value changes.

Defaulttrue

validationMessagestring

Validation message or externally supplied error text.

Default""

validationStateint

Input validation state.

EValidationState.None
EValidationState.Success
EValidationState.Warning
EValidationState.Error

DefaultEValidationState.None

valuevar

Date-time string, or start/end array in range mode; uses the component default when valueFormat is empty.

Default""

valueFormatstring

Date/time format of the external value; empty uses the component default.

Default"YYYY-MM-DD HH:mm:ss"

valueOnClearvar

Value after clearing, or a function returning it; inherits configuration by default.

DefaultInherited; default undefined

visiblebool

Whether the component is visible.

Defaulttrue

widthreal

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

DefaultimplicitWidth

calendarLocalevarRead only

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

DefaultComputed at runtime

endPanelvarRead only

Start or end date picker panel item.

DefaultComputed at runtime

hasValidationErrorboolRead only

Whether validation state is Error.

DefaultComputed at runtime

panelvarRead only

Start or end date picker panel item.

DefaultComputed at runtime

popupvarRead only

Reference to the internal menu, popup or tooltip.

DefaultComputed at runtime

wordCountintRead only

Current input character count.

DefaultComputed at runtime

showPasswordStrengthbool

Show strength and rule checks while a password input is focused.

Defaultfalse

passwordRulesvar

Password rules with label and minLength or pattern.

Default

Show default value

[ {label: ELocale.texts.PasswordLength, minLength: 8}, {label: ELocale.texts.PasswordUppercase, pattern: /[A-Z]/}, {label: ELocale.texts.PasswordLowercase, pattern: /[a-z]/}, {label: ELocale.texts.PasswordNumber, pattern: /[0-9]/}, {label: ELocale.texts.PasswordSymbol, pattern: /[^A-Za-z0-9]/} ]

passwordStrengthrealRead only

Fraction of passed password rules, from 0 to 1.

Default

Show default value

passwordRequirements.length ? passwordRequirements.filter(function(rule) { return rule.passed }).length / passwordRequirements.length : 0

passwordRequirementsvarRead only

Rule results with label and passed fields.

Default

Show default value

Array.isArray(passwordRules) ? passwordRules.map(function(rule) { let passed = false try { if (rule && rule.minLength !== undefined) passed = text.length >= Number(rule.minLength) else if (rule && rule.pattern) { const expression = new RegExp(rule.pattern) passed = expression.test(text) } } catch (error) { passed = false } return {label: rule && rule.label ? String(rule.label) : "", passed: passed} }) : []

Signals

SignaturePurpose

picked(var value)

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

changed(var value)

Emitted when the selection changes; value is the new value.

calendarChanged(var value)

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

inputRejected(string text)

Emitted when input cannot be converted to a valid value; text is the rejected input.

popupVisibleChanged(bool visible)

Emitted when the picker panel opens or closes; visible is its visibility.

viewChanged(var date, string mode)

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

Methods

SignaturePurpose

close()

Close the component panel or popup.

clearValue()

Clear the current date selection.

selectDateTime(input)

Select the date and time specified by input.

confirm()

Confirm and commit the current selection.

selectDateTimeRange(start, end)

Select the date-time range from start to end.

commitInput(input)

Commit the input text; invalid input preserves the previous value and emits inputRejected.

open()

Open the component panel or popup.