HusDateTimePickerPanel 日期选择面板

August 24, 2026 · View on GitHub

← 返回主目录

← 返回本类别目录

HusDateTimePickerPanel 日期选择面板

可选择的日期时间面板。

  • 模块 { HuskarUI.Basic }

  • 继承自 { Control }


支持的代理：

  • dayDelegate: Component 天项代理，代理可访问属性：

    • model: var 天模型(参见 MonthGrid)

    • isHovered: bool 是否悬浮在本项

    • isCurrentWeek: bool 是否为当前周

    • isHoveredWeek: bool 是否为悬浮周

    • isCurrentMonth: bool 是否为当前月

    • isVisualMonth: bool 是否为(==visualMonth)

    • isCurrentDay: bool 是否为当前天

    • isVisualDay: bool 是否为(==visualDay)


支持的属性：

属性名类型默认值描述
animationEnabledboolHusTheme.animationEnabled是否开启动画
textstring''当前日期文本
visualTextstring''视觉日期文本
showNowboolfalse显示当前日期时间的快捷选择
showDatebooltrue显示日期部分
showTimebooltrue显示时间部分
datePickerModeintHusDateTimePicker.Mode_Day日期选择模式(来自 HusDateTimePicker)
timePickerModeintHusDateTimePicker.Mode_HHMMSS时间选择模式(来自 HusDateTimePicker)
formatstring'yyyy-MM-dd hh:mm:ss'日期时间格式
pickerMonthTablelist<string>-月份选择表(长度需为12)
visualYearTitlestring-视觉年份标题(顶部年份部分)
visualMonthTitlestring-视觉月份标题(顶部月份部分)
prevIconSourceint丨stringHusIcon.LeftOutlined往前图标(来自 HusIcon)或图标链接
nextIconSourceint丨stringHusIcon.RightOutlined往后图标(来自 HusIcon)或图标链接
superPrevIconSourceint丨stringHusIcon.DoubleLeftOutlined加倍往前图标(来自 HusIcon)或图标链接
superNextIconSourceint丨stringHusIcon.DoubleRightOutlined加倍往后图标(来自 HusIcon)或图标链接
yearRowSpacingreal10年选择项行间隔
yearColumnSpacingreal15年选择项列间隔
monthRowSpacingreal10月选择项行间隔
monthColumnSpacingreal15月选择项列间隔
quarterSpacingreal10季度选择项列间隔
initDateTimedateundefined初始日期时间
currentDateTimedate-当前日期时间
currentYearint-当前年份
currentMonthint-当前月份
currentDayint-当前天数
currentWeekNumberint-当前周数
currentQuarterint-当前季度
currentHoursint-当前小时数
currentMinutesint-当前分钟数
currentSecondsint-当前秒数
visualYearint-视觉年份(通常不需要使用)
visualMonthint-视觉月份(通常不需要使用)
visualDayint-视觉天数(通常不需要使用)
visualWeekNumberint-视觉周数(通常不需要使用)
visualQuarterint-视觉季度(通常不需要使用)
visualHoursint-视觉小时(通常不需要使用)
visualMinutesint-视觉分钟(通常不需要使用)
visualSecondsint-视觉秒数(通常不需要使用)
colorBgcolor-背景颜色
radiusBgHusRadius-背景圆角
radiusItemBgHusRadius-选择项圆角
borderBgHusBorder-背景边框
sizeHintstring'normal'尺寸提示

支持的函数：

  • clearDateTime() 清空当前日期时间

  • setDateTime(date: jsDate) 设置当前日期时间为 date

  • getDateTime(): jsDate 获取当前的日期时间

  • setDateTimeString(dateTimeString: string) 设置当前日期时间字符串为 dateTimeString

  • getDateTimeString(): string 获取当前的日期时间字符串

  • selectNow() 选择现在时间

  • resetVisualStatus() 重置所有视觉状态(即重置visual为current)


支持的信号：

  • selected(date: jsDate) 选择日期时间时发出

    • date 选择的日期时间

代码演示

示例 1 - 基本

基本用法在 HusDateTimePicker 中已有示例。

import QtQuick
import HuskarUI.Basic

Column {
    spacing: 10

    HusSwitch {
        id: showNowSwitch
        text: 'showNow: '
        checked: false
    }

    HusSwitch {
        id: showDateSwitch
        text: 'showDate: '
        checked: true
    }

    HusSwitch {
        id: showTimeSwitch
        text: 'showTime: '
        checked: false
    }

    HusRadioBlock {
        id: sizeHintRadio
        initCheckedIndex: 1
        model: [
            { label: 'Small', value: 'small' },
            { label: 'Normal', value: 'normal' },
            { label: 'Large', value: 'large' },
        ]
    }

    HusDateTimePickerPanel {
        showNow: showNowSwitch.checked
        showDate: showDateSwitch.checked
        showTime: showTimeSwitch.checked
        format: qsTr('yyyy-MM-dd hh:mm:ss')
        sizeHint: sizeHintRadio.currentCheckedValue
    }
}

示例 2 - 自定义日历

简单创建一个五月带有农历和节日的日历。

通过 initDateTime 属性设置初始日期时间。

通过 dayDelegate 属性设置日代理。

import QtQuick
import HuskarUI.Basic

Column {
    spacing: 10

    HusDateTimePickerPanel {
        width: 410
        height: 340
        initDateTime: new Date(2025, 4, 1)
        datePickerMode: HusDateTimePicker.Mode_Day
        showTime: false
        format: qsTr('yyyy-MM-dd')
        yearRowSpacing: 30
        yearColumnSpacing: 40
        monthRowSpacing: 30
        monthColumnSpacing: 40
        dayDelegate: HusButton {
            implicitWidth: 40
            implicitHeight: 36
            font.pixelSize: parseInt(HusTheme.Primary.fontPrimarySize) - 2
            type: isCurrentDay || isHovered ? HusButton.Type_Primary : HusButton.Type_Link
            text: `<span>\${model.day}</span>\${getHoliday()}`
            effectEnabled: false
            colorText: isCurrentDay ? 'white' : HusTheme.Primary.colorTextBase
            Component.onCompleted: contentItem.textFormat = Text.RichText;

            function getHoliday() {
                if (model.month === 4 && model.day === 1) {
                    return `<br/><span style='color:red'>劳动节</span>`;
                } else if (model.month === 4 && model.day === 21) {
                    return `<br/><span style='color:red'>小满</span>`;
                } else if (model.month === 4 && model.day === 31) {
                    return `<br/><span style='color:red'>端午节</span>`;
                } else {
                    const lunarDaysMay2025 = [
                      '初四', '初五', '初六', '初七', '初八',
                      '初九', '初十', '十一', '十二', '十三',
                      '十四', '十五', '十六', '十七', '十八',
                      '十九', '二十', '廿一', '廿二', '廿三',
                      '廿四', '廿五', '廿六', '廿七', '廿八',
                      '廿九', '三十', '初一', '初二', '初三',
                      '初四'
                    ];
                    if (model.month === 4)
                        return `<br/><span style='color:\${colorText}'>\${lunarDaysMay2025[model.day - 1]}</span>`;
                    else
                        return '';
                }
            }
        }
    }
}