组件/表单组件

EDateTimePicker 日期时间

import EUI 1.0

示例与代码

日期时间

QML 代码QML

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

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行 许可

默认时间与日期时间范围

QML 代码QML

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("日期时间：") + JSON.stringify(webDatesDateTime.value) } } }

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行 许可

日期与时间

QML 代码QML

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

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行 许可

属性

属性说明取值与默认值

accessibleNamestring

辅助技术读取的名称；建议为无文字控件设置可读名称。

默认值placeholderText

appendComponentComponent

自定义输入附加区或列表尾部的 Component 插槽；null 使用默认内容。 委托上下文见本页示例。

默认值null

arrowControlbool

使用上下箭头调整时间字段。

默认值true

cellComponentComponent

自定义表格单元格或日期格的 Component 插槽；null 使用默认内容。 委托上下文见本页示例。

默认值null

clearIconint

组件使用的图标。

EIcons.*
0（无图标）

默认值EIcons.CIRCLE_XMARK

clearablebool

显示清除操作；评分中允许再次点击当前分数清零。

默认值true

dateFormatstring

日期或时间显示格式串。

默认值"YYYY-MM-DD"

defaultTimevar

日期时间选择的默认时刻，可为 Date 或范围起止时间数组。

默认值null

defaultValuevar

未选中值时的默认面板定位值。

默认值null

disabledDatevar

日期禁用函数，接收 JavaScript Date 并返回是否禁用。

默认值null

disabledHoursvar

禁用小时函数，返回禁用小时数组。

默认值null

disabledMinutesvar

禁用分钟函数，根据所选小时返回禁用分钟数组。

默认值null

disabledSecondsvar

禁用秒函数，根据所选小时和分钟返回禁用秒数组。

默认值null

echoModeenum

输入内容的显示模式。

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

默认值动态绑定

emptyValuesvar

判定为空值的数组；默认包含 undefined、null 和空字符串。

默认值继承 Provider，默认 [undefined, null, ""]

enabledbool

是否允许交互；false 时控件禁用。

默认值true

endPlaceholderstring

空值时显示的占位文字。

默认值""

fallbackPlacementsvar

首选位置空间不足时尝试的位置数组。

placement 可选值组成的数组

默认值["top-start", "bottom-start"]

fontfont

字体配置，控制字体、字号及文字样式。

常用字段：
family、pixelSize、pointSize
bold、italic、weight
underline、strikeout
letterSpacing、wordSpacing

默认值应用字体

formatstring

显示格式；日期时间使用格式串，进度可使用函数，倒计时使用时间占位符。

默认值"YYYY-MM-DD HH:mm:ss"

formattervar

格式化回调，把当前值转换为显示文字。

默认值null

heightreal

组件尺寸，单位为像素；可绑定父布局尺寸。

默认值implicitHeight

isRangebool

启用起止范围选择。

默认值false

maxDatestring

可选日期上下限，格式 yyyy-MM-dd；空字符串不限制。

默认值""

maxTimestring

可选时间上下限，采用 HH:mm 或 HH:mm:ss；空字符串不限制。

默认值""

maximumLengthint

最多允许输入的字符数。

默认值32767

minDatestring

可选日期上下限，格式 yyyy-MM-dd；空字符串不限制。

默认值""

minTimestring

可选时间上下限，采用 HH:mm 或 HH:mm:ss；空字符串不限制。

默认值""

nextMonthIconint

组件使用的图标。

EIcons.*
0（无图标）

默认值EIcons.CHEVRON_RIGHT

nextYearIconint

组件使用的图标。

EIcons.*
0（无图标）

默认值EIcons.CHEVRONS_RIGHT

parservar

输入解析函数，把显示文字转换为底层值。

默认值null

passwordVisiblebool

密码是否以明文显示。

默认值false

placeholderTextstring

空值时显示的占位文字。

默认值随当前语言变化

placementstring

选择面板相对于输入框的位置。

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

默认值"bottom-start"

prefixComponentComponent

自定义前缀的 Component 插槽；null 使用默认内容。 委托上下文见本页示例。

默认值null

prefixIconint

组件使用的图标。

EIcons.*
0（无图标）

默认值EIcons.CALENDAR

prependComponentComponent

自定义输入前置区的 Component 插槽；null 使用默认内容。 委托上下文见本页示例。

默认值null

prevMonthIconint

组件使用的图标。

EIcons.*
0（无图标）

默认值EIcons.CHEVRON_LEFT

prevYearIconint

组件使用的图标。

EIcons.*
0（无图标）

默认值EIcons.CHEVRONS_LEFT

rangeSeparatorstring

起止值之间的分隔文字。

默认值" — "

readOnlybool

禁止用户编辑或评分，仍可通过属性设置值。

默认值true

shortcutsvar

日期快捷选项的数据数组。

字段：
text, value

默认值[]

showConfirmbool

是否显示确认按钮。

默认值true

showFooterbool

是否显示底部操作区。

默认值true

showNowbool

显示选择当前时间的操作。

默认值true

showPasswordbool

启用密码输入及密码显示切换。

默认值false

showWeekNumberbool

显示周序号。

默认值false

showWordLimitbool

显示当前字数与长度上限。

默认值false

singlePanelbool

范围选择只显示一个日期面板。

默认值false

sizeint

控件尺寸；默认继承最近的 EConfigProvider。

EStyle.Small
EStyle.Medium
EStyle.Large

默认值继承 Provider，默认 EStyle.Medium

startPlaceholderstring

空值时显示的占位文字。

默认值""

styleTypeint

语义配色风格。

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

默认值EStyle.Primary

suffixComponentComponent

自定义后缀的 Component 插槽；null 使用默认内容。 委托上下文见本页示例。

默认值null

suffixIconint

组件使用的图标。

EIcons.*
0（无图标）

默认值0

textstring

显示的文字内容。

默认值

展开默认值

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

textColorcolor

文字颜色。

默认值动态绑定

timeFormatstring

日期或时间显示格式串。

默认值"HH:mm:ss"

unlinkPanelsbool

范围选择的两个日期面板独立翻页。

默认值false

validateEventbool

值变化时是否向所属表单派发校验请求。

默认值true

validationMessagestring

校验结果说明或外部错误文字。

默认值""

validationStateint

输入校验状态。

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

默认值EValidationState.None

valuevar

日期时间字符串；范围模式为起止数组。未指定 valueFormat 时使用组件默认格式。

默认值""

valueFormatstring

对外 value 的日期时间格式；为空时使用组件默认格式。

默认值"YYYY-MM-DD HH:mm:ss"

valueOnClearvar

清除后的值，也可传函数返回清除值；默认继承配置。

默认值继承 Provider，默认 undefined

visiblebool

是否显示组件。

默认值true

widthreal

组件尺寸，单位为像素；可绑定父布局尺寸。

默认值implicitWidth

calendarLocalevar只读

日期时间解析、格式化和面板使用的语言配置。

默认值由运行时计算

endPanelvar只读

日期选择的起始或结束面板对象。

默认值由运行时计算

hasValidationErrorbool只读

当前校验状态是否为 Error。

默认值由运行时计算

panelvar只读

日期选择的起始或结束面板对象。

默认值由运行时计算

popupvar只读

内部菜单、弹层或提示对象引用。

默认值由运行时计算

wordCountint只读

当前输入字符数量。

默认值由运行时计算

showPasswordStrengthbool

聚焦密码输入时显示强度与规则检查。

默认值false

passwordRulesvar

密码规则数组；每项包含 label 及 minLength 或 pattern。

默认值

展开默认值

[ {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]/} ]

passwordStrengthreal只读

通过规则的比例，范围为 0 到 1。

默认值

展开默认值

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

passwordRequirementsvar只读

包含 label 与 passed 的规则检查结果。

默认值

展开默认值

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} }) : []

信号

签名作用

picked(var value)

选定值后触发，value 为选中的值。

changed(var value)

所选值变化时触发，value 为新的值。

calendarChanged(var value)

选择过程中的日历值变化时触发，value 为当前选择值。

inputRejected(string text)

输入无法转换为有效值时触发，text 为被拒绝的输入文字。

popupVisibleChanged(bool visible)

选择面板显示或隐藏时触发，visible 表示面板是否可见。

viewChanged(var date, string mode)

日历显示的日期或视图模式变化时触发，date 为显示日期，mode 为视图模式。

方法

签名作用

close()

关闭组件的面板或弹窗。

clearValue()

清空当前日期选择。

selectDateTime(input)

选择 input 指定的日期时间。

confirm()

确认当前选择并提交结果。

selectDateTimeRange(start, end)

选择 start 到 end 的日期时间范围。

commitInput(input)

提交输入文字；内容无效时保留原值并发出 inputRejected。

open()

打开组件的面板或弹窗。