兼容Qt4/Qt5版本Qml控件Calendar

发表于

通过点击日历控件区域，选择日期的Qml组件。

Calendar 备注
导入方法 文件导入
兼容性 QtQuick 1.x与QtQuick 2.x
继承 GridView

插图

属性

信号：

  • signal clicked(variant date) : 在日历中的有效日期上单击鼠标时发出，date是鼠标被单击的日期。

方法：

  • function today() ：重定位到当天日期
  • function getDate() : 获取日历当前日期
  • function setDate(date) : 设置日历的日期

示例

1
2
3
Calendar {
    width: 600; height: 480
}

插图

部分源码预览

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
/**
 * @brief 在日历中的有效日期上单击鼠标时发出。
 * @param date: 鼠标被单击的日期。
 */
signal clicked(variant date)

/**
 * @brief 重定位到当天日期
 */
function today() {
    var today = new Date()
    setDate(today)
}

/**
 * @brief 获取日历当前日期
 */
function getDate() {
    return privateVar.getYMD(root.currentIndex)
}

/**
 * @brief 设置日历的日期
 */
function setDate(date) {
    privateVar.monthAndYearNumber = [date.getMonth() + 1, date.getFullYear()]
    root.currentIndex = privateVar.getIndexByDate(date.getDate(), date.getMonth()+1, date.getFullYear())

    /* 更新日期任务列表 */
    __setNoteDates(privateVar.noteDates)
}

Item {
    id: weekItem
    width: root.width; height: root.height/13
    Repeater {
        model: ["日", "一", "二", "三", "四", "五", "六"]
        Item {
            x: index * width
            width: root.cellWidth; height: weekItem.height

            Text {
                anchors.centerIn: parent
                text: model.modelData
                font.pixelSize: dpW(14)
                color: "#666666"
            }
        }
    }
}

关于

插图