qml组件 日期时间选择控件

学习qml时需要一个日期时间选择控件，网上找了找没什么喜欢的，就临时写了个将就下，界面借鉴了我的手机的时间调整，效果如下
初始时间设定没有添加，是里面的current属性，有需要的可以拿去用，有改进意见的欢迎交流，一起学习，共同进步

## 文件名:ListButton
import QtQuick 2.4Item {id:listButtonItemproperty int first: 0property int last: 20property int current: 0signal selectChange(var value)signal lastNumChanged(var value)onLastChanged: {refrushList()}function refrushList(){if(current > last){current = last}var mycaus=[]for(var i=0;i<6;i++){mycaus[i]= last+i-5;}for(i = 6;i<12;i++){mycaus[i] = first +i -6;}var flag=-1;for(i = 2;i<9;i++){if(current === mycaus[i]){flag = i;}}if(flag !== -1){text1.text = formataNum(mycaus[flag])text2.text = formataNum(mycaus[flag-1])text3.text = formataNum(mycaus[flag])text4.text = formataNum(mycaus[flag+1])text5.text = formataNum(mycaus[flag+2])}else{text1.text = formataNum(current-2)text2.text = formataNum(current-1)text3.text = formataNum(current)text4.text = formataNum(current+1)text5.text = formataNum(current+2)}}Component.onCompleted: {refrushList()}function formataNum(num){var s;String(num).length >= 2 ? s = String(num):s = '0' + num;return s;}function updateText(y){if(y >= listButtonItem.height *0.5){text1.text = text2.texttext2.text = text3.texttext3.text = text4.texttext4.text = text5.textif(Number(text5.text) === last){text5.text = formataNum(first)}else{var num = Number(text5.text)+1;text5.text = formataNum(num)}}else{text5.text = text4.texttext4.text = text3.texttext3.text = text2.texttext2.text = text1.textif(Number(text1.text) === first){text1.text = formataNum(last)}else{var num1 = Number(text1.text)-1;text1.text = formataNum(num1)}}current = Number(text3.text)}MouseArea{anchors.fill: parentonWheel: {var datl = wheel.angleDelta.y/120;//一刻滚轮代表正负120度，所以除以120等于1或者-1if(datl>0){updateText(listButtonItem.height *0.4)}else{updateText(listButtonItem.height *0.6)}}onClicked: updateText(mouse.y)}Column{anchors.fill: parentRectangle{width: parent.widthheight: parent.height / 5color: "transparent"Text {id: text1color: "#be8181"anchors.centerIn: parentfont.pixelSize: parent.height * 0.4text: "<b>2002</b>"}}Rectangle{width: parent.widthheight: parent.height / 5color: "transparent"Text {id: text2color: "#be8181"//anchors.fill: parentanchors.centerIn: parentfont.pixelSize: parent.height *0.6text: "2002"}}Rectangle{width: parent.widthheight: parent.height / 5color: "transparent"Text {id: text3//anchors.fill: parentanchors.centerIn: parentfont.pixelSize: parent.height* 0.8text: "<b>2002</b>"color:"#fd7d2c"}}Rectangle{width: parent.widthheight: parent.height / 5color: "transparent"Text {id: text4color: "#be8181"//anchors.fill: parentanchors.centerIn: parentfont.pixelSize: parent.height * 0.6text: "<b>2002</b>"}}Rectangle{width: parent.widthheight: parent.height / 5color: "transparent"Text {id: text5color: "#be8181"//anchors.fill: parentanchors.centerIn: parentfont.pixelSize: parent.height *0.4text: "<b>2002</b>"}}}
}/*##^##
Designer {D{i:0;autoSize:true;height:480;width:640}
}
##^##*/

##文件名DataTimeEdit
import QtQuick 2.9
import QtQuick.Controls 2.3Rectangle
{id:editwidth: 540height: 380color: "#aa000000"property int year:2020property int month: 1property int day: 1property int hour: 1property int minute: 1property int second: 1function isLeapYear(year) {var cond1 = year % 4 == 0;var cond2 = year % 100 != 0;var cond3 = year % 400 ==0;var cond = cond1 && cond2 || cond3;if(cond) {return true;} else {return false;}}function timeChange(){var normalYear=[31,28,31,30,31,30,31,31,30,31,30,31];var leapYear=[31,29,31,30,31,30,31,31,30,31,30,31];if(isLeapYear(yearButton.current)){dayButton.last = leapYear[monthButton.current-1]}else{dayButton.last = normalYear[monthButton.current-1]}}Column{id: columnwidth: parent.widthheight: parent.heightspacing: 5//请选择时间Text{width: 515height: 30id:tipsTexttext: qsTr("请选择时间")anchors.horizontalCenterOffset: 0color: "red"font.pointSize: 12anchors.horizontalCenter: parent.horizontalCenterhorizontalAlignment: Text.AlignHCenterverticalAlignment: Text.AlignVCenter}//lineRectangle{id:line1anchors.horizontalCenter: parent.horizontalCenterwidth: 515height: 1color: "#bcbbbb"}Row{id:row1width: parent.widthheight: 20Rectangle{color: "transparent"height: 20width: parent.width /6.0Text {font.pointSize: 10anchors.centerIn: parentid: text1color: "black"text: qsTr("年")}}Rectangle{color: "transparent"height: 20;width: parent.width /6.0;Text {font.pointSize: 10anchors.centerIn: parentid: text2text: qsTr("月")}}Rectangle{color: "transparent"height: 20;width: parent.width /6.0;Text {font.pointSize: 10anchors.centerIn: parenttext: qsTr("日")}}Rectangle{color: "transparent"height: 20;width: parent.width /6.0;Text {font.pointSize: 10anchors.centerIn: parenttext: qsTr("时")}}Rectangle{color: "transparent"height: 20;width: parent.width /6.0;Text {font.pointSize: 10anchors.centerIn: parenttext: qsTr("分")}}Rectangle{color: "transparent"height: 20;width: parent.width /6.0;Text {font.pointSize: 10anchors.centerIn: parenttext: qsTr("秒")}}}Row{id: row2width:  parent.widthheight:  240ListButton{id: yearButtonwidth:parent.width/6height:240first:2000last :3000current:2020//onSelectChange:console.log(value)onCurrentChanged: {timeChange()}}ListButton{id:monthButtonwidth:parent.width/6height:240first:1last :12current:12onCurrentChanged: {timeChange()}}ListButton{id:dayButtonwidth:parent.width/6height:240first:1last :31current:31}ListButton{width:parent.width/6height:240first:0last :59current:0}ListButton{width:parent.width/6height:240first:0last :59current:0}ListButton{width:parent.width/6height:240first:0last :59current:0}}Row{anchors.horizontalCenter: parent.horizontalCenterwidth: 515layoutDirection: Qt.RightToLeftChangButton{//自定义按钮width: 100height: 40btntext:qsTr("确认")onClicked: console.log(width+" "+height)}ChangButton{width: 100height: 40btntext:qsTr("现在")}ChangButton{width: 100height: 40btntext:qsTr("今天")}}}}

引用

        DataTimeEdit{width: 540height: 380}