组件/数据展示

ECalendar 日历

import EUI 1.0

示例与代码

日期范围与自定义日期格

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 ECalendar { value: "2026-10-10" controllerType: "select" width: Math.min(620, parent.width) dateCellDelegate: Component { EText { padding: 10 wrapMode: Text.WordWrap text: parent.day.slice(-2) + (parent.day === "2026-10-10" ? qsTr("\n发布日") : "") color: parent.isSelected ? EPaletteManager.ThemePalette.fetchColorForStyle(EStyle.Primary) : EPaletteManager.ThemePalette.textRegular(ETheme.dark) } } }

效果

运行代码，体验组件交互

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

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

日历

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 ECalendar { value: "2026-10-10" maxDate: "2026-12-31" minDate: "2026-01-01" }

效果

运行代码，体验组件交互

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

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

属性

属性说明取值与默认值

calendarLocalevar

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

默认值

展开默认值

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

cellComponentComponent

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

默认值null

controllerTypestring

月份切换控件的显示方式。

"button" / "select"
"none"

默认值"button"

dateCellDelegateComponent

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

默认值null

disabledDatevar

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

默认值null

enabledbool

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

默认值true

fixedViewbool

锁定日期面板视图，不允许通过标题切换层级。

默认值false

focusedDatedate

日期面板键盘导航聚焦的日期。

默认值new Date(year, month, 1)

formattervar

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

默认值null

headerDelegateComponent

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

默认值null

heightreal

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

默认值implicitHeight

hoverValuestring

当前悬停日期或评分，用于预览。

默认值""

maxDatestring

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

默认值""

minDatestring

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

默认值""

monthint

当前显示月份，范围 1～12。

默认值new Date().getMonth()

nextMonthIconint

组件使用的图标。

EIcons.*
0（无图标）

默认值EIcons.CHEVRON_RIGHT

nextYearIconint

组件使用的图标。

EIcons.*
0（无图标）

默认值EIcons.CHEVRONS_RIGHT

prevMonthIconint

组件使用的图标。

EIcons.*
0（无图标）

默认值EIcons.CHEVRON_LEFT

prevYearIconint

组件使用的图标。

EIcons.*
0（无图标）

默认值EIcons.CHEVRONS_LEFT

rangevar

日历显示范围，使用起止日期数组。

默认值[]

rangeStartstring

正在选择的日期范围起点。

默认值""

showConfirmbool

是否显示确认按钮。

默认值false

showFooterbool

是否显示底部操作区。

默认值true

showWeekNumberbool

显示周序号。

默认值false

sizeint

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

EStyle.Small
EStyle.Medium
EStyle.Large

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

typestring

日期的选择单位以及单选、多选或范围模式。

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

默认值"date"

valuevar

选中日期，格式 yyyy-MM-dd；面板 type 为月份、年份或范围时使用对应格式。

默认值""

viewModestring

面板当前显示的日期层级。

"date" / "month"
"year"

默认值

展开默认值

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

visiblebool

是否显示组件。

默认值true

widthreal

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

默认值implicitWidth

yearint

当前显示年份。

默认值new Date().getFullYear()

displayedMonthsint只读

日历范围内实际显示的月份数据。

默认值由运行时计算

periodViewbool只读

日期面板是否处于月份或年份区间视图。

默认值由运行时计算

selectedDatevar只读

日期面板解析后的当前选中 Date。

默认值由运行时计算

selectedDayvar只读

日历当前选中日期。

默认值由运行时计算

validatedRangevar只读

日历范围经过校验后的起止日期。

默认值由运行时计算

信号

签名作用

picked(var value)

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

calendarChanged(var value)

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

panelChanged(var date, string mode)

日历视图切换时触发，date 为显示日期，mode 为视图模式。

dateSelected(string value)

选择日期后触发，value 为选中的日期。

方法

签名作用

focusCalendar()

将键盘焦点移到日历。

setView(date)

将日历显示位置切换到 date 对应的日期。

shiftMonth(offset)

将日历显示月份移动 offset 个月，负数表示向前。

selectDate(input)

选中 input 对应的日期。

navigate(offset)

切换到指定步骤或相对时间范围。