Warning, /utilities/daykountdown/src/contents/ui/DatePicker.qml is written in an unsupported language. File is not indexed.
0001 // SPDX-FileCopyrightText: 2021 Claudio Cambra <claudio.cambra@gmail.com>
0002 // SPDX-License-Identifier: LGPL-2.1-or-later
0003
0004 import QtQuick 2.15
0005 import QtQuick.Controls 2.15 as QQC2
0006 import QtQuick.Layouts 1.15
0007 import org.kde.kirigami 2.15 as Kirigami
0008
0009 Item {
0010 id: datepicker
0011
0012 signal datePicked(date pickedDate)
0013
0014 property date selectedDate: new Date() // Decides calendar span
0015 property date clickedDate: new Date() // User's chosen date
0016 property date today: new Date()
0017 property int year: selectedDate.getFullYear()
0018 property int month: selectedDate.getMonth()
0019 property int firstDay: new Date(year, month, 1).getDay() // 0 Sunday to 6 Saturday
0020
0021 function prevMonth() {
0022 selectedDate = new Date(selectedDate.getFullYear(), selectedDate.getMonth() - 1, selectedDate.getDate())
0023 }
0024
0025 function nextMonth() {
0026 selectedDate = new Date(selectedDate.getFullYear(), selectedDate.getMonth() + 1, selectedDate.getDate())
0027 }
0028
0029 function prevYear() {
0030 selectedDate = new Date(selectedDate.getFullYear() - 1, selectedDate.getMonth(), selectedDate.getDate())
0031 }
0032
0033 function nextYear() {
0034 selectedDate = new Date(selectedDate.getFullYear() + 1, selectedDate.getMonth(), selectedDate.getDate())
0035 }
0036
0037 function prevDecade() {
0038 selectedDate = new Date(selectedDate.getFullYear() - 10, selectedDate.getMonth(), selectedDate.getDate())
0039 }
0040
0041 function nextDecade() {
0042 selectedDate = new Date(selectedDate.getFullYear() + 10, selectedDate.getMonth(), selectedDate.getDate())
0043 }
0044
0045 Layout.fillWidth: true
0046 Layout.fillHeight: true
0047
0048 ColumnLayout {
0049 anchors.fill: parent
0050
0051 RowLayout {
0052 id: headingRow
0053 Layout.fillWidth: true
0054
0055 Kirigami.Heading {
0056 id: monthLabel
0057 Layout.fillWidth: true
0058 text: selectedDate.toLocaleDateString(Qt.locale(), "MMMM yyyy")
0059 level: 1
0060 }
0061 QQC2.ToolButton {
0062 icon.name: 'go-previous-view'
0063 onClicked: {
0064 if (pickerView.currentIndex == 1) { // monthGrid index
0065 prevYear()
0066 } else if (pickerView.currentIndex == 2) { // yearGrid index
0067 prevDecade()
0068 } else { // dayGrid index
0069 prevMonth()
0070 }
0071 }
0072 }
0073 QQC2.ToolButton {
0074 icon.name: 'go-jump-today'
0075 onClicked: selectedDate = new Date()
0076 }
0077 QQC2.ToolButton {
0078 icon.name: 'go-next-view'
0079 onClicked: {
0080 if (pickerView.currentIndex == 1) { // monthGrid index
0081 nextYear()
0082 } else if (pickerView.currentIndex == 2) { // yearGrid index
0083 nextDecade()
0084 } else { // dayGrid index
0085 nextMonth()
0086 }
0087 }
0088 }
0089 }
0090
0091 QQC2.TabBar {
0092 id: rangeBar
0093 currentIndex: pickerView.currentIndex
0094 Layout.fillWidth: true
0095
0096 QQC2.TabButton {
0097 id: daysViewCheck
0098 Layout.fillWidth: true
0099 text: i18n("Days")
0100 onClicked: pickerView.currentIndex = 0 // dayGrid is first item in pickerView
0101 }
0102 QQC2.TabButton {
0103 id: monthsViewCheck
0104 Layout.fillWidth: true
0105 text: i18n("Months")
0106 onClicked: pickerView.currentIndex = 1
0107 }
0108 QQC2.TabButton {
0109 id: yearsViewCheck
0110 Layout.fillWidth: true
0111 text: i18n("Years")
0112 onClicked: pickerView.currentIndex = 2
0113 }
0114 }
0115
0116 QQC2.SwipeView {
0117 id: pickerView
0118 Layout.fillWidth: true
0119 Layout.fillHeight: true
0120 clip: true
0121
0122 QQC2.ButtonGroup {
0123 buttons: dayGrid.children
0124 }
0125 GridLayout {
0126 id: dayGrid
0127 columns: 7
0128 rows: 6
0129 Layout.fillWidth: true
0130 Layout.fillHeight: true
0131 Layout.topMargin: Kirigami.Units.smallSpacing
0132
0133 Repeater {
0134 model: 7
0135 delegate: QQC2.Label {
0136 Layout.fillWidth: true
0137 height: dayGrid / dayGrid.rows
0138 horizontalAlignment: Text.AlignHCenter
0139 opacity: 0.7
0140 text: Qt.locale().dayName(index + Qt.locale().firstDayOfWeek, Locale.ShortFormat) // dayName() loops back over beyond index 6
0141 }
0142 }
0143
0144 Repeater {
0145 model: dayGrid.columns * dayGrid.rows // 42 cells per month
0146
0147 delegate: QQC2.Button {
0148 // Stop days overflowing from the grid by creating an adjusted offset
0149 property int firstDayOfWeekOffset: Qt.locale().firstDayOfWeek >= 4 ?
0150 Qt.locale().firstDayOfWeek - 7 + 1 :
0151 Qt.locale().firstDayOfWeek + 1
0152 // add locale offset for correct firstDayOfWeek
0153 property int dateToUse: index + firstDayOfWeekOffset - (datepicker.firstDay <= 1 ?
0154 datepicker.firstDay + 7:
0155 datepicker.firstDay)
0156 property date date: new Date(datepicker.year, datepicker.month, dateToUse)
0157 property bool sameMonth: date.getMonth() === month
0158 property bool isToday: date.getDate() === datepicker.today.getDate() &&
0159 date.getMonth() === datepicker.today.getMonth() &&
0160 date.getFullYear() === datepicker.today.getFullYear()
0161
0162 Layout.fillWidth: true
0163 Layout.fillHeight: true
0164 flat: true
0165 highlighted: this.isToday
0166 checkable: true
0167 checked: date.getDate() === clickedDate.getDate() &&
0168 date.getMonth() === clickedDate.getMonth() &&
0169 date.getFullYear() === clickedDate.getFullYear()
0170 opacity: sameMonth ? 1 : 0.7
0171 text: date.getDate()
0172 onClicked: datePicked(date), clickedDate = date
0173 }
0174 }
0175 }
0176
0177 GridLayout {
0178 id: monthGrid
0179 columns: 3
0180 rows: 4
0181 Layout.fillWidth: true
0182 Layout.fillHeight: true
0183 Layout.topMargin: Kirigami.Units.smallSpacing
0184
0185 Repeater {
0186 model: monthGrid.columns * monthGrid.rows
0187 delegate: QQC2.Button {
0188 property int monthToUse: index
0189 property date date: new Date(year, monthToUse)
0190 Layout.fillWidth: true
0191 Layout.fillHeight: true
0192 flat: true
0193 text: Qt.locale().monthName(date.getMonth())
0194 onClicked: selectedDate = new Date(date), pickerView.currentIndex = 0
0195 }
0196 }
0197 }
0198
0199 GridLayout {
0200 id: yearGrid
0201 columns: 3
0202 rows: 4
0203 Layout.fillWidth: true
0204 Layout.fillHeight: true
0205 Layout.topMargin: Kirigami.Units.smallSpacing
0206
0207 Repeater {
0208 model: yearGrid.columns * yearGrid.rows
0209 delegate: QQC2.Button {
0210 property int yearToUse: index - 1 + (Math.floor(year/10)*10) // Display a decade, e.g. 2019 - 2030
0211 property date date: new Date(yearToUse, 0)
0212 property bool sameDecade: Math.floor(yearToUse / 10) == Math.floor(year / 10)
0213 Layout.fillWidth: true
0214 Layout.fillHeight: true
0215 flat: true
0216 opacity: sameDecade ? 1 : 0.7
0217 text: date.getFullYear()
0218 onClicked: selectedDate = new Date(date), pickerView.currentIndex = 1
0219 }
0220 }
0221 }
0222 }
0223 }
0224 }
0225
0226
0227