技術標籤：QtQML作品展示qtqml

Qml中沒有現成的日期時間選擇控制元件，自己做了個，先上效果圖：

程式碼實現較為簡單，沒有過多需要介紹的，控制元件載入會自動獲取當前日期，轉動撥盤會根據當前年、月匹配當月天數，程式碼如下，直接複製到Qml中載入就可以使用了。程式碼如下：

import QtQuick 2.1
import QtQuick.Controls 2.4

Rectangle{
    id:dateRectangle
    color: "#00000000"
    border.color: "#38d3dc"
    property date date
    property var monthsList: [1,2,3,4,5,6,7,8,9,10,11,12]
    property color labelColor: "#f48fb1"
    property var monthS: [1,3,5,7,8,10,12]
    property string year: yearsTumbler.currentItem.text
    property string month: monthsTumbler.currentItem.text
    property string day: daysTumbler.currentItem.text

    Row {
        anchors.fill: parent
        Tumbler {
            id: yearsTumbler
            width:parent.width/3
            height: parent.height
            wheelEnabled: true
            font.pointSize: 16
            font.family: "微軟雅黑"
            onCurrentItemChanged: {
                var year = currentItem.text
                var month = monthsTumbler.currentIndex+1
                getDays(year,month)
            }

        }
        Label{
            width: 20
            text: "年"
            font.bold: true
            anchors.verticalCenter: parent.verticalCenter
            font.pointSize: 13
            font.family: "微軟雅黑"
            color: labelColor
        }

        Tumbler {
            id: monthsTumbler
            width:parent.width/3-30
            height: parent.height
            model: monthsList
            font.pointSize: 16
            font.family: "微軟雅黑"
            onCurrentIndexChanged: {
                var year = yearsTumbler.currentItem.text
                var month = currentIndex+1
                getDays(year,month)
            }
        }
        Label{
            width: 20
            text: "月"
            font.bold: true
            anchors.verticalCenter: parent.verticalCenter
            font.pointSize: 13
            font.family: "微軟雅黑"
            color: labelColor
        }
        Tumbler {
            id: daysTumbler
            width:parent.width/3-30
            height: parent.height
            font.pointSize: 16
            font.family: "微軟雅黑"
        }
        Label{
            width: 20
            text: "日"
            font.bold: true
            anchors.verticalCenter: parent.verticalCenter
            font.pointSize: 13
            font.family: "微軟雅黑"
            color: labelColor
        }
    }

    Component.onCompleted: {
        initialize()
    }

    function initialize(){//初始化控制元件
        var yearsList=[]
        date = new Date()
        var year = date.getFullYear()
        for(var i=0;i<8;i++){
            var y = year-i
            yearsList.push(y)
        }
        yearsTumbler.model = yearsList
        yearsTumbler.currentIndex = 0
        var month = date.getMonth()
        monthsTumbler.currentIndex = month
        getDays(year,month+1)
        var day = date.getDate()
        daysTumbler.currentIndex = day-1
    }
    function getDays(year,month){//獲取當月天數
        if(monthS.indexOf(month)>-1){
            addDays(31)
        }else if(month>2){
            addDays(30)
        }else{
            if(year%4==0){
               addDays(29)
            }else{
                addDays(28)
            }
        }
    }
    function addDays(days){
        var daysList = []
        for(var i=1;i<=days;i++){
            daysList.push(i)
        }
        daysTumbler.model = daysList
    }
}