Qt QML实现时间日期选择控件

先看图

打开界面，会自动获取到当前时间，根据月份确定日有几天，转动时间轴点击确定，打印输出当前时间。以下是该控件功能的主要代码

import QtQuick 2.0
import QtQuick.Extras 1.4
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.3
import QtQuick.Controls.Styles 1.4
Rectangle {

    property int curyear
    property int curmonth
    property int curday
    property int hour
    property int minutes
    property date currentDate: new Date()

    property var current_year
    property var current_month
    property var current_day
    //time format
    property string curTimeFormat: "24H"  //12H
    Component.onCompleted: {
        updateDate();//load DateTime
    }

    function updateDate(){
        var date_tring = currentDate.toLocaleDateString();
        console.log("local = ",date_tring,currentDate.getFullYear(),currentDate.getDay())
        curyear = parseInt(currentDate.getFullYear().toString());
        curmonth = parseInt((currentDate.getMonth()+1).toString())
        curday = parseInt(currentDate.getDate().toString())
    }
    id: calendar
    visible: true
    width: 580; height: 467;
    color:"#383838"
    property alias tumbler: year_tumbler
    Component{
        id: tumbler_style
        TumblerStyle{
            visibleItemCount :5
            id: style
            delegate: Item{
                //implicitHeight: (year_tumbler.height - padding.top - padding.bottom) / style.visibleItemCount
                  opacity: 0.4 + Math.max(0, 1 - Math.abs(styleData.displacement)) * 0.6

                height: 45
                Text {
                    width: 69;height: 21
                    id: label
                    text: styleData.value
                    font.pixelSize: 32
                    //color: styleData.current ? "#F5F3F1" : "#676666"
                    color:"#F5F3F1"
                    scale:styleData.current ? 1:0.9
                    anchors.centerIn: parent
                }
            }
            property Component frame: Item {}
            property Component background: Item {}
            property Component separator: Item {}
            property Component foreground: Item {}
        }
    }

    Text {x:116; y:38;text: qsTr("年");font.pixelSize: 30;color: "#C4BFBD"}
    Text {x:282; y:38;text: qsTr("月");font.pixelSize: 30;color: "#C4BFBD"}
    Text {x:429; y:38;text: qsTr("日");font.pixelSize: 30;color: "#C4BFBD"}

    //year
    Tumbler {
        id: year_tumbler
        style: tumbler_style
        x: 99; y:100; width: 360; height: 234
        TumblerColumn {
            id: tumblerYearColum
            width: 69
            model: {
                var array = [];
                for (var i = 2000; i < 2100; ++i) {
                    array.push(i.toString() );
                }
                model = array;
            }

            onCurrentIndexChanged: {
                //    当前如果为2月  可能需要更新2月份天数    下标为1
                if(tumblerMonthColum.currentIndex === 1)
                {
                    tumblerDayColumn.updateModel()
                }
                current_year = model[currentIndex]
            }
        }
        Component.onCompleted: {
            year_tumbler.setCurrentIndexAt(0,curyear-2000);
        }
    }

    //month
    Tumbler {
        id: monthTumbler
        x:277;  y:100; width: 360; height: 234
        style: tumbler_style
        TumblerColumn {
            id: tumblerMonthColum
            width: 69
            model:  {
                var array = [];
                for (var i = 1; i <= 12; ++i) {
                    if(i.toString().length==1){
                        array.push("0"+i.toString() );
                    }
                    else{
                         array.push(i.toString() );
                    }
                }
                model = array;
            }
            //update dayTumbler
            onCurrentIndexChanged: {
                current_month = model[currentIndex]
                tumblerDayColumn.updateModel()
            }
        }

        Component.onCompleted: {
            monthTumbler.setCurrentIndexAt(0,curmonth-1)

        }
    }

    //day
    Tumbler{
        id: dayTumbler
        x:423;  y:100; width: 360; height: 234
        style: tumbler_style
        readonly property var days: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
        TumblerColumn {
            id: tumblerDayColumn
            width: 69
            model: 31
            function updateModel() {
                var previousIndex = tumblerDayColumn.currentIndex;
                var newDays = dayTumbler.days[tumblerMonthColum.currentIndex]
                //闰年&2月份 下标+1
                if((tumblerYearColum.currentIndex%4 == 0) && (tumblerMonthColum.currentIndex == 1)){
                    newDays = dayTumbler.days[tumblerMonthColum.currentIndex]+1
                }
                console.log("newDays111",newDays,previousIndex)

                var array = [];
                for (var i = 0; i < newDays; ++i) {
                    if((i+1).toString().length==1){

                        array.push("0"+(i +1).toString());
                    }
                    else{
                         array.push((i +1).toString() );
                    }

                }
                model = array;
                dayTumbler.setCurrentIndexAt(0, Math.min(newDays - 1, previousIndex));
            }
            onCurrentIndexChanged: {
                current_day =model[currentIndex]

            }
        }
        Component.onCompleted: {
            console.log("Component",curday)
            dayTumbler.setCurrentIndexAt(0,curday-1)
        }
    }

    //两条线段
    Rectangle{ x:0;y:198;width: 580;color: "#474747"; height: 1}
    Rectangle{ x:0;y:245;width: 580;color: "#474747";height: 1}

    Rectangle{ x:442;y:380;width: 138;
        color: "#474747";
        height: 87
        Text {
            font.pixelSize: 30;color: "#ED8117"
            text: qsTr("确认")
            anchors.centerIn: parent
        }
        MouseArea{
            anchors.fill: parent
            onClicked: {

                console.log("current select time = ",current_year,current_month,current_day)
            }
        }

    }

}

工程文件地址：https://download.csdn.net/download/qq_28386947/12036315