DateTimePickerDialog组件 - QTCN开发网

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12

Dialog {
    id: root
    property alias dateVisible: dateLayout.visible
    property alias timeVisible: timeLayout.visible

    signal dateTimeFinished(string dateString, string timeString)

    function parse(strDateTime)
    {
        let now = new Date();
        if (strDateTime.length > 0)
        {
            now.setTime(Date.parse(strDateTime));
        }
        setDateTime(now.getFullYear(),
                                now.getMonth() + 1,
                                now.getDate(),
                                now.getHours(),
                                now.getMinutes(),
                                now.getSeconds());
    }

    function setDate(iYear, iMonth, iDay)
    {
        yearTumbler.currentIndex = iYear - parseInt(yearTumbler.model[0]);
        monthTumbler.currentIndex = iMonth - 1;
        dayTumbler.currentIndex = iDay - 1;
    }

    function setTime(iHour, iMin, iSec)
    {
        hourTumbler.currentIndex = iHour;
        minsTumbler.currentIndex = iMin;
        secsTumbler.currentIndex = iSec;
    }

    function setDateTime(iYear, iMonth, iDay, iHour, iMin, iSec)
    {
        yearTumbler.currentIndex = iYear - parseInt(yearTumbler.model[0]);
        monthTumbler.currentIndex = iMonth - 1;
        dayTumbler.currentIndex = iDay - 1;
        hourTumbler.currentIndex = iHour;
        minsTumbler.currentIndex = iMin;
        secsTumbler.currentIndex = iSec;
    }

    RowLayout {
        anchors.centerIn: parent
        spacing: dateLayout.visible && timeLayout.visible ? 10 : 0
        //width: dateLayout.visible && timeLayout.visible ? 500 : 300
        RowLayout {
            id: dateLayout
            Tumbler {
                id: yearTumbler
                Layout.preferredWidth: 50
                delegate: delegateComponent
            }

            Label {
                Layout.alignment: Qt.AlignVCenter
                Layout.preferredWidth: 6
                text: '-'
            }

            Tumbler {
                id: monthTumbler
                Layout.preferredWidth: 30
                model: ["01","02","03","04","05","06","07","08","09","10","11","12"]
                delegate: delegateComponent
            }

            Label {
                Layout.alignment: Qt.AlignVCenter
                Layout.preferredWidth: 6
                text: '-'
            }

            Tumbler {
                id: dayTumbler
                Layout.preferredWidth: 30
                model: ["01","02","03","04","05","06","07","08","09","10",
                    "11","12","13","14","15","16","17","18","19","20",
                    "21","22","23","24","25","26","27","28","29","30","31"]
                delegate: delegateComponent
            }
        }
        RowLayout {
            id: timeLayout
            Tumbler {
                id: hourTumbler
                Layout.preferredWidth: 30
                delegate: delegateComponent
            }

            Label {
                Layout.alignment: Qt.AlignVCenter
                Layout.preferredWidth: 6
                text: ':'
            }

            Tumbler {
                id: minsTumbler
                Layout.preferredWidth: 30
                delegate: delegateComponent
            }

            Label {
                Layout.alignment: Qt.AlignVCenter
                Layout.preferredWidth: 6
                text: ':'
            }

            Tumbler {
                id: secsTumbler
                Layout.preferredWidth: 30
                delegate: delegateComponent
            }
        }
    }

    onAccepted: {
        let now = new Date();
        now.setFullYear(parseInt(yearTumbler.currentItem.text));
        now.setMonth(monthTumbler.currentIndex);
        now.setDate(dayTumbler.currentIndex + 1);
        now.setHours(hourTumbler.currentIndex);
        now.setMinutes(minsTumbler.currentIndex);
        now.setSeconds(secsTumbler.currentIndex);
        let yyyy = now.getFullYear();
        let mon = now.getMonth() + 1;
        mon = mon < 10 ? ('0' + mon) : mon;
        let dd = now.getDate();
        dd = dd < 10 ? ('0' + dd) : dd;
        let hh = now.getHours();
        hh = hh < 10 ? ('0' + hh) : hh;
        let mm = now.getMinutes();
        mm = mm < 10 ? ('0' + mm) : mm;
        let ss = now.getSeconds();
        ss = ss < 10 ? ('0' + ss) : ss;
        dateTimeFinished(yyyy + '-' + mon + '-' + dd,
                        hh + ':' + mm + ':' + ss);
    }

    standardButtons: Dialog.Ok | Dialog.Cancel

    Component {
        id: delegateComponent
        Label {
            text: modelData
            opacity: 1.0 - Math.abs(Tumbler.displacement) / (Tumbler.tumbler.visibleItemCount / 2)
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
            font.pixelSize: root.font.pixelSize * 1.25
        }
    }

    Component.onCompleted: {
        let arr = [];
        for (var i = 1900; i <= 2050; i++)
        {
            arr.push(i);
        }
        yearTumbler.model = arr;

        arr = [];
        for (var i = 0; i < 24; i++)
        {
            arr.push(i < 10 ? ('0' + i) : i);
        }
        hourTumbler.model = arr;

        arr = [];
        for (var i = 0; i < 59; i++)
        {
            arr.push(i < 10 ? ('0' + i) : i);
        }
        minsTumbler.model = arr;
        secsTumbler.model = arr;

        let now = new Date();
        setDateTime(now.getFullYear(), now.getMonth() + 1, now.getDate(),
            now.getHours(), now.getMinutes(), now.getSeconds());
    }
}