EDatePickerPanel 日期面板

import EUI 1.0

示例与代码

日期面板

QML 代码QML

效果

运行代码，体验组件交互

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

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

键盘、范围预览与自定义日期单元

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

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("清除范围")

onClicked: webDatesPanel.value = []
        }
    }
}

效果

运行代码，体验组件交互

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

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

独立面板

QML 代码QML

效果

运行代码，体验组件交互

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

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

属性

属性说明取值与默认值

calendarLocalevar

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

默认值

展开默认值

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

cellComponentComponent

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

默认值null

disabledDatevar

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

默认值null

enabledbool

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

默认值true

fixedViewbool

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

默认值false

focusedDatedate

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

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

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

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()

periodViewbool只读

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

默认值由运行时计算

selectedDatevar只读

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

默认值由运行时计算

信号

签名作用

picked(var value)

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

calendarChanged(var value)

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

panelChanged(var date, string mode)

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

方法

签名作用

focusCalendar()

将键盘焦点移到日历。

setView(date)

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

shiftMonth(offset)

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

selectDate(date)

选中 input 对应的日期。

navigate(offset)

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

EDatePickerPanel 日期面板 ​

示例与代码 ​

日期面板 ​

键盘、范围预览与自定义日期单元 ​

独立面板 ​

属性 ​

信号 ​

方法 ​

EDatePickerPanel 日期面板

示例与代码

日期面板

键盘、范围预览与自定义日期单元

独立面板

属性

信号

方法