Components/Form components

ETimePicker Time picker

import EUI 1.0

Examples

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 ETimePicker { isRange: true minTime: "08:00:00" maxTime: "20:00:00" value: ["09:00:00", "18:00:00"] disabledHours: function() { return [12, 13] } disabledMinutes: function(hour) { return hour === 9 ? [15, 45] : [] } } }

Preview

Run the code to try the component

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

Code runs in this browser Licenses

Disabled time choices and range roles

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 ETimePicker { id: webDatesTime isRange: true readOnly: false arrowControl: false format: "hh:mm A" minTime: "08:00:00" maxTime: "20:00:00" width: Math.min(380, parent.width) value: ["09:00:00", "18:00:00"] objectName: "webDatesTime" disabledHours: function(role) { return role === "end" ? [12, 13] : [] } disabledMinutes: function(hour) { return hour === 9 ? [15, 45] : [] } } EText { width: parent.width wrapMode: Text.WordWrap text: qsTr("Time range: ") + JSON.stringify(webDatesTime.value) } } }

Preview

Run the code to try the component

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

Code runs in this browser Licenses

Time selection

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 ETimePicker { value: "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

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

comparingDatevar

Date at the other range endpoint used for comparison.

Defaultnull

defaultValuevar

Default panel position when no value is selected.

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""

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

maxTimestring

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

Default""

maximumLengthint

Maximum allowed input characters.

Default32767

minTimestring

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

Default""

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.CLOCK

prependComponentComponent

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

Defaultnull

rangeSeparatorstring

Separator text between range values.

Default" — "

readOnlybool

Prevent user editing or rating while allowing programmatic value changes.

Defaulttrue

rolestring

Role of this input in a time range.

"" / "start"
"end"

Default""

saveOnBlurbool

Commit valid time input on blur.

Defaultfalse

showPasswordbool

Enable password entry and visibility switching.

Defaultfalse

showSecondsbool

Show seconds selection.

Defaulttrue

showWordLimitbool

Show the current character count and length limit.

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

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

Selected time string; TimePicker range mode uses a start/end array, with format set by valueFormat.

Default""

valueFormatstring

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

Default""

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

canonicalFormatstringRead only

Actual date/time format used to parse and serialize value.

DefaultComputed at runtime

displayFormatstringRead only

Resolved date/time display format.

DefaultComputed at runtime

draftValidboolRead only

Whether the current time draft is valid.

DefaultComputed at runtime

hasValidationErrorboolRead only

Whether validation state is Error.

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.

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.

Methods

SignaturePurpose

close()

Close the component panel or popup.

clearValue()

Clear the current date selection.

selectTime(time)

Select time after checking the allowed time constraints.

selectRange(start, end)

Select the time range from start to end.

open()

Open the component panel or popup.

commitInput(input)

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