QML 自定义日期组件

青山白云

Qt 有控件QDateEdit，但是qml没有，今天我们来自己实现一个，非常简单哦

创建默认qml工程

创建自定义组件 QmlDateEdit.qml

点击上下键，计算一下日期

import QtQuick 2.0

Rectangle {
    id: rect
    width: 150
    height: 30
    border.width: 1
    border.color: "gray"

    property var currentDate: new Date

    Component.onCompleted: {
        label.text = getFormat(currentDate)
    }

    function up(){
        var time = currentDate.getTime() + 1*24*60*60*1000
        currentDate.setTime(time)
        label.text = getFormat(currentDate)
    }

    function down(){
        var time = currentDate.getTime() - 1*24*60*60*1000
        currentDate.setTime(time)
        label.text = getFormat(currentDate)
    }

    function addZero(value){
        if(value<10){
            return '0' + value
        }
        else{
            return value
        }
    }

    function getFormat(date){
        var year = date.getFullYear()
        var month = date.getMonth()
        var day = date.getDate()

        return year + '/' + addZero(month+1) + '/' + addZero(day)
    }

    TextInput{
        id: label
        anchors.verticalCenter: parent.verticalCenter
        width: parent.width-imgUp.width
        readOnly: true
        selectByMouse: true

    }
    Image {
        id: imgUp
        source: "qrc:/up.png"
        anchors.right: parent.right

        MouseArea{
            anchors.fill: parent
            onClicked: up()
        }
    }
    Image {
        id: imgDown
        source: "qrc:/down.png"
        anchors.right: parent.right
        anchors.bottom: parent.bottom

        MouseArea{
            anchors.fill: parent
            onClicked: down()
        }
    }
}

main.qml调用组件

import QtQuick 2.9
import QtQuick.Window 2.2

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("QML 自定义日期组件")

    QmlDateEdit{
        id: dateEdit
    }
}