Details
-
Bug
-
Resolution: Unresolved
-
P3: Somewhat important
-
None
-
5
-
None
-
Qt 5.7 Android, iOS
Description
just started to implement a Material DatePicker using qt.labs.controls Calendar.
works fine
only a small problem: if the first or last row of a month is empty, this empty row is visible.
this doesn't matter if Months are displayed in lists side-by-side but for a DatePicker where always only one month is visible this doesn'tl look good.
import QtQuick 2.6 import QtQuick.Controls 2.0 import QtQuick.Controls.Material 2.0 import Qt.labs.calendar 1.0 ApplicationWindow { id: window width: 360 height: 360 visible: true Material.primary: Material.Teal Material.accent: Material.DeepOrange Pane { id: root anchors.fill: parent focus: true Label { anchors.centerIn: parent text: Qt.formatDate(calendarRoot.selectedDate, Qt.DefaultLocaleLongDate) } Button { id: prevButton text: "Previous" anchors.bottom: parent.bottom anchors.left: parent.left onClicked: { if(calendarRoot.displayMonth > 0) { calendarRoot.displayMonth -- } else { calendarRoot.displayMonth = 11 calendarRoot.displayYear -- } calendarRoot.open() } } Button { id: button text: "Select a Day" anchors.bottom: parent.bottom anchors.horizontalCenter: parent.horizontalCenter onClicked: { calendarRoot.open() } } Button { id: nextButton text: "Next" anchors.bottom: parent.bottom anchors.right: parent.right onClicked: { if(calendarRoot.displayMonth < 11) { calendarRoot.displayMonth ++ } else { calendarRoot.displayMonth = 0 calendarRoot.displayYear ++ } calendarRoot.open() } } } // calendarRoot Popup { id: calendarRoot property date selectedDate: new Date() property int displayMonth: Calendar.July property int displayYear: 2016 property int calendarSize: parent.width > parent.height? parent.height * 0.80 : parent.width * 0.80 property int gridSize: calendarSize * 0.9 x: (parent.width - calendarSize) / 2 y: (parent.height - calendarSize) / 2 implicitHeight: calendarSize implicitWidth: calendarSize MonthGrid { id: monthGrid width: calendarRoot.gridSize height: calendarRoot.gridSize month: calendarRoot.displayMonth year: calendarRoot.displayYear topPadding: title.height Column { id: title x: monthGrid.contentItem.x width: monthGrid.contentItem.width spacing: 6 Label { width: parent.width height: implicitHeight * 2 text: monthGrid.title horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter font.pointSize: 18 } DayOfWeekRow { width: parent.width } } // title column leftPadding: weekNumbers.width WeekNumberColumn { id: weekNumbers month: calendarRoot.displayMonth year: calendarRoot.displayYear y: monthGrid.contentItem.y height: monthGrid.contentItem.height } // WeekNumberColumn onClicked: { // Important: check the month to avoid clicking on days outside where opacity 0 if(date.getMonth() == calendarRoot.displayMonth) { calendarRoot.selectedDate = date calendarRoot.close() } else { console.log("outside valid month "+date.getMonth()) } } delegate: Label { id: dayLabel readonly property bool selected: model.day === calendarRoot.selectedDate.getDate() && model.month === calendarRoot.selectedDate.getMonth() && model.year === calendarRoot.selectedDate.getFullYear() text: model.day font.bold: model.today? true: false opacity: model.month === monthGrid.month ? 1 : 0 color: pressed || selected ? "white" : model.today ? Material.accent : Material.foreground minimumPointSize: 8 fontSizeMode: Text.Fit horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter background: Rectangle { anchors.centerIn: parent width: parent.width height: width radius: width / 2 color: Material.primary visible: pressed || parent.selected } } // label in month grid } // month grid onOpened: { button.enabled = false nextButton.enabled = false prevButton.enabled = false } onClosed: { button.enabled = true nextButton.enabled = true prevButton.enabled = true } } }