ISCS_Cabinet_WIN/content/ReuseDateField.qml

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import Qt.labs.platform

RowLayout {
    id: reusedatefield
    anchors.fill: parent
    spacing: 10

    property string strTitle: ""
    property string strValue: ""

    Rectangle {
        width: parent.width * 0.225
        height: parent.height
        color: "#00ffffff"
        Text {
            id: reusedatefield_text_title
            anchors.fill: parent
            font.pixelSize: 25
            color: "#ffffff"
            horizontalAlignment: Text.AlignRight
            verticalAlignment: Text.AlignVCenter
        }
    }

    Rectangle {
        id: reusedatefield_rect_date
        x: parent.width * 0.225
        width: parent.width * 0.675
        height: parent.height * 0.725
        color: "#ffffff"
        radius: 5

        TextField {
            id: reusedatefield_text_value
            anchors.fill: parent
            anchors.margins: 2
            font.pointSize: 15
            focus: false
            color: "#a3000000"
            background: Rectangle {
                color: "transparent"
            }
            placeholderText: qsTr("")
            font.pixelSize: 20
            selectionColor: "#a300aaff"
            horizontalAlignment: Text.AlignLeft
            verticalAlignment: Text.AlignVCenter
            wrapMode: Text.NoWrap
            placeholderTextColor: "#60ffffff"
            padding:5
            renderType: Text.QtRendering
            font.styleName: "Regular"
            readOnly: true

            MouseArea
            {
                anchors.fill: parent
                onClicked: {
                    reusedatefield_popup_roor.open();
                    reusedatefield_popup_roor.x = reusedatefield_rect_date.mapToItem(Overlay.overlay, 0, 0).x
                    reusedatefield_popup_roor.y = reusedatefield_rect_date.mapToItem(Overlay.overlay, 0, 0).y
                            - reusedatefield_popup_roor.height
                }
            }

            Connections {
                target: reusedatefield_popup_roor
                onDateSelected :{
                    reusedatefield.strValue = Qt.formatDate(selectedDate, "yyyy-MM-dd");
                }
            }
        }

        Popup {
            id: reusedatefield_popup_roor
            width: 320
            height: 360
            parent: Overlay.overlay

            modal: true
            focus: true

            property date selectedDate: new Date()
            signal dateSelected(date selectedDate)

            Rectangle {
                anchors.fill: parent
                color: "#ffffff"
                radius: 4
                border.color: "#cccccc"

                Column {
                    anchors.fill: parent
                    anchors.margins: 10
                    spacing: 10

                    // 年月导航
                    Row {
                        width: parent.width
                        height: 40
                        spacing: 10

                        Button {
                            width: height
                            text: "<"
                            onClicked: changeMonth(-1)
                        }

                        Label {
                            text: Qt.formatDate(reusedatefield_popup_roor.selectedDate, "yyyy年MM月")
                            font.bold: true
                            font.pixelSize: 16
                            anchors.verticalCenter: parent.verticalCenter
                        }

                        Button {
                            width: height
                            text: ">"
                            onClicked: changeMonth(1)
                        }
                    }

                    // 星期标题
                    Row {
                        width: parent.width
                        height: 30
                        spacing: 1

                        Repeater {
                            model: ["日", "一", "二", "三", "四", "五", "六"]
                            Label {
                                width: (parent.width - 6) / 7
                                text: modelData
                                horizontalAlignment: Text.AlignHCenter
                                font.bold: true
                            }
                        }
                    }

                    // 日期网格
                    Grid {
                        width: parent.width
                        columns: 7
                        spacing: 1

                        Repeater {
                            model: getDaysModel()

                            Rectangle {
                                width: (parent.width - 6) / 7
                                height: 36
                                color: {
                                    if (!modelData.enabled) return "transparent"
                                    if (modelData.isSelected) return "#4285f4"
                                    if (modelData.isToday) return "#e0e0e0"
                                    return "white"
                                }
                                radius: 4

                                Label {
                                    anchors.centerIn: parent
                                    text: modelData.day
                                    color: {
                                        if (!modelData.enabled) return "transparent"
                                        if (modelData.isSelected) return "white"
                                        return "black"
                                    }
                                }

                                MouseArea {
                                    anchors.fill: parent
                                    enabled: modelData.enabled
                                    onClicked: {
                                        reusedatefield_popup_roor.selectedDate = new Date(
                                                    reusedatefield_popup_roor.selectedDate.getFullYear(),
                                                    reusedatefield_popup_roor.selectedDate.getMonth(),
                                                    modelData.day
                                                    )

                                        reusedatefield_popup_roor.dateSelected(reusedatefield_popup_roor.selectedDate)
                                        reusedatefield_popup_roor.close()
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    Connections {
        target: reusedatefield
        onStrTitleChanged: {
            reusedatefield_text_title.text = strTitle;
        }

        onStrValueChanged: {
            reusedatefield_text_value.text = strValue;
        }
    }

    Component.onCompleted: {
        reusedatefield_text_title.text = strTitle;
        reusedatefield_text_value.text = strValue;
    }

    function changeMonth(offset) {
        var newDate = new Date(
                    reusedatefield_popup_roor.selectedDate.getFullYear(),
                    reusedatefield_popup_roor.selectedDate.getMonth() + offset,
                    reusedatefield_popup_roor.selectedDate.getDate()
                    )
        reusedatefield_popup_roor.selectedDate = newDate
    }

    function getDaysModel() {
        var firstDay = new Date(
                    reusedatefield_popup_roor.selectedDate.getFullYear(),
                    reusedatefield_popup_roor.selectedDate.getMonth(),
                    1
                    )
        var daysInMonth = new Date(
                    reusedatefield_popup_roor.selectedDate.getFullYear(),
                    reusedatefield_popup_roor.selectedDate.getMonth() + 1,
                    0
                    ).getDate()
        var startDay = firstDay.getDay()

        var today = new Date()
        var isToday = (today.getFullYear() === reusedatefield_popup_roor.selectedDate.getFullYear() &&
                       today.getMonth() === reusedatefield_popup_roor.selectedDate.getMonth())

        var days = []
        // 填充空白
        for (var i = 0; i < startDay; i++) {
            days.push({day: "", enabled: false})
        }
        // 填充日期
        for (i = 1; i <= daysInMonth; i++) {
            days.push({
                          day: i,
                          enabled: true,
                          isSelected: (i === reusedatefield_popup_roor.selectedDate.getDate()),
                          isToday: (isToday && i === today.getDate())
                      })
        }
        return days
    }
}