Qml 日历 - 选择开始日期和结束日期答案

【问题标题】：Qml Calendar - selecting Start Date and End DateQml 日历 - 选择开始日期和结束日期
【发布时间】：2021-02-22 17:26:38
【问题描述】：

我想知道是否可以编写类似这张图片的代码，因为我更喜欢只显示一个日历来选择开始和结束日期，而不是显示两个日历。

【问题讨论】：

这可以用 QML 来实现，是的。您有更具体的问题吗？
我想知道编码方式

标签： qt qml

【解决方案1】：

试试这个

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
import QtGraphicalEffects 1.0
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.1
Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
Calendar {
    id: calendar
    width: parent.width
    height: parent.height
    frameVisible: true
    weekNumbersVisible: true
    // selectedDate: new Date(2014, 0, 1)
    focus: true
    property var startDate: undefined
    property var stopDate: undefined

    style: CalendarStyle {
        dayDelegate: Item {
            readonly property color sameMonthDateTextColor: "#444"
            readonly property color selectedDateColor: "#3778d0"
            readonly property color selectedDateTextColor: "white"
            readonly property color differentMonthDateTextColor: "#bbb"
            readonly property color invalidDatecolor: "#dddddd"
            property var dateOnFocus: styleData.date



            Rectangle {
                anchors.fill: parent
                border.color: "transparent"
                color: styleData.date !== undefined && styleData.selected ? selectedDateColor : "transparent"

            }

            Rectangle{
                id:fl
                anchors.fill: parent
                property bool flag: false
                color: ((dateOnFocus>calendar.startDate) && (dateOnFocus< calendar.stopDate))?"#55555555":
                       (calendar.startDate !==undefined && dateOnFocus.getTime()===calendar.startDate.getTime())?"#3778d0":"transparent"
            }


            MouseArea{
                anchors.fill: parent
                propagateComposedEvents: true
                onPressed: {

                    if(calendar.startDate===undefined){
                        calendar.startDate=styleData.date
                    }
                    else if(calendar.stopDate=== undefined){
                        calendar.stopDate=styleData.date
                    }
                    else{
                        calendar.startDate=styleData.date
                        calendar.stopDate= undefined
                    }

                    if(calendar.stopDate<=calendar.startDate){
                        calendar.startDate=styleData.date
                        calendar.stopDate= undefined
                    }

                    mouse.accepted = false
                }
            }


            Label {
                id: dayDelegateText
                text: styleData.date.getDate()
                anchors.centerIn: parent
                color: {
                    var color = invalidDatecolor;
                    if (styleData.valid) {
                        // Date is within the valid range.
                        color = styleData.visibleMonth ? sameMonthDateTextColor : differentMonthDateTextColor;
                        if (styleData.selected) {
                            color = selectedDateTextColor;
                        }
                        else if (dateOnFocus.getTime()===calendar.startDate.getTime()) {
                            color = selectedDateTextColor;
                        }
                    }
                    color;
                }
            }
        }
    }
}

}

【讨论】：