MauiKit Calendar

DatePicker.qml
1import QtQuick
2import QtQuick.Layouts
3import QtQuick.Controls
4
5import org.mauikit.controls as Maui
6import org.mauikit.calendar as Kalendar
7
8/**
9 * @inherit QtQuick.Controls.Page
10 * @brief A control for quickly picking a date in the format of year, month and day number.
11 *
12 * @image html datepicker.png
13 *
14 * @code
15 * Maui.ApplicationWindow
16 * {
17 * id: root
18 *
19 * Maui.Page
20 * {
21 * anchors.fill: parent
22 * Maui.Controls.showCSD: true
23 * title: root.title
24 *
25 * MC.DatePicker
26 * {
27 * id: _datePicker
28 * height: 300
29 * width: 300
30 * anchors.centerIn: parent
31 *
32 * onAccepted: (date) => root.title = date.toLocaleString()
33 * }
34 * }
35 * }
36 * @endcode
37 */
38Page
39{
40 id: control
41
42 /**
43 * @brief
44 */
45 readonly property date startDate : new Date()
46
47 /**
48 * @brief
49 */
50 property int selectedMonth : selectedDate.getUTCMonth()
51
52 /**
53 * @brief
54 */
55 property int selectedYear: selectedDate.getUTCFullYear()
56
57 /**
58 * @brief
59 */
60 property int selectedDay : selectedDate.getDate()
61
62 /**
63 * @brief
64 */
65 property date selectedDate : startDate
66
67 /**
68 * @brief
69 *
70 */
71 signal accepted(var date)
72
73 padding: 0
74
75 header: Maui.ToolBar
76 {
77 width: parent.width
78
79 background: null
80
81 leftContent: Maui.ToolActions
82 {
83 autoExclusive: true
84
85 Action
86 {
87 text: control.selectedDay
88 checked: _swipeView.currentIndex === 0
89 onTriggered: _swipeView.currentIndex = 0
90 }
91
92 Action
93 {
94 text: Qt.locale().standaloneMonthName(control.selectedMonth)
95 checked: _swipeView.currentIndex === 1
96 onTriggered: _swipeView.currentIndex = 1
97
98 }
99
100 Action
101 {
102 text: control.selectedYear
103 checked: _swipeView.currentIndex === 2
104 onTriggered: _swipeView.currentIndex = 2
105 }
106 }
107
108 rightContent: Button
109 {
110 text: i18n("Done")
111 onClicked: control.accepted(control.selectedDate)
112 }
113 }
114
115 contentItem: SwipeView
116 {
117 id: _swipeView
118 background: null
119 clip: true
120
121 Kalendar.DaysGrid
122 {
123 id: _daysPane
124 month: control.selectedMonth+1
125 year: control.selectedYear
126
127 onDateClicked: (date) =>
128 {
129 control.updateSelectedDate(date.getDate(), control.selectedMonth, control.selectedYear)
130 }
131 }
132
133 Kalendar.MonthsGrid
134 {
135 id: _monthPage
136 selectedMonth: control.selectedMonth
137 onMonthSelected: (month) => control.updateSelectedDate(control.selectedDay, month, control.selectedYear)
138 }
139
140 Kalendar.YearsGrid
141 {
142 id: _yearPane
143 selectedYear: control.selectedYear
144 onYearSelected: (year) => control.updateSelectedDate(control.selectedDay, control.selectedMonth, year)
145 }
146 }
147
148 /**
149 * @brief
150 */
151 function updateSelectedDate(day, month, year)
152 {
153 control.selectedDay = day
154 control.selectedMonth = month
155 control.selectedYear = year
156
157 console.log("CREATING A NEW DATE WITH", day, month, year)
158 control.selectedDate = new Date(year, month, day)
159 _swipeView.incrementCurrentIndex()
160 }
161}
This file is part of the KDE documentation.
Documentation copyright © 1996-2024 The KDE developers.
Generated on Fri Oct 11 2024 12:08:19 by doxygen 1.12.0 written by Dimitri van Heesch, © 1997-2006

KDE's Doxygen guidelines are available online.