MauiKit Calendar

TimePicker.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 picking a time in the format of hour and minutes.
11 *
12 * @image html timepicker.png
13 *
14 * @code
15 * MC.TimePicker
16 * {
17 * id: _view
18 * anchors.fill: parent
19 * onAccepted: (time) => console.log("Time Picked, ", time)
20 * }
21 * @endcode
22 */
23Page
24{
25 id: control
26
27 /**
28 * @brief
29 */
30 readonly property date startTime : new Date()
31
32 /**
33 * @brief
34 */
35 property int selectedMinute: selectedTime.getMinutes()
36
37 /**
38 * @brief
39 */
40 property int selectedHour: selectedTime.getHours()
41
42 /**
43 * @brief
44 */
45 property int timeZoneOffset : 0
46
47 /**
48 * @brief
49 */
50 property date selectedTime : startTime
51
52 /**
53 * @brief
54 */
55 property string format: control.selectedHour < 12 ? "AM" : "PM"
56
57 /**
58 * @brief
59 * @param time
60 */
61 signal accepted(var time)
62
63 background: null
64
65 header: ToolBar
66 {
67 width: parent.width
68 background: null
69
70 contentItem: RowLayout
71 {
72 spacing: 0
73
74 Maui.ToolActions
75 {
76 id: _dateGroup
77 autoExclusive: true
78
79 Action
80 {
81 text: i18n("AM")
82 checked: control.format === text
83 onTriggered: control.format = text
84 }
85
86 Action
87 {
88 text: i18n("PM")
89 checked: control.format === text
90
91 onTriggered: control.format = text
92 }
93 }
94
95 Item {Layout.fillWidth: true}
96
97 Button
98 {
99 text: i18n("Done")
100 onClicked:
101 {
102 control.updateSelectedTime(minutesTumbler.currentIndex, hoursTumbler.currentIndex, control.format)
103 control.accepted(control.selectedTime)
104 }
105 }
106 }
107 }
108
109 contentItem: Item
110 {
111 Row
112 {
113 id: row
114 height: parent.height
115 anchors.horizontalCenter: parent.horizontalCenter
116
117 spacing: Maui.Style.space.medium
118
119 Tumbler
120 {
121 id: hoursTumbler
122 spacing: Maui.Style.space.medium
123
124 model: 12
125 currentIndex: formatUTCHour(control.selectedHour)
126
127 delegate: Button
128 {
129 font.bold: checked
130
131 checked : index === Tumbler.tumbler.currentIndex
132 text: formatText(Tumbler.tumbler.count, modelData)
133 opacity: 1.0 - Math.abs(Tumbler.displacement) / (Tumbler.tumbler.visibleItemCount / 2)
134
135 onClicked:
136 {
137 Tumbler.tumbler.currentIndex = modelData
138 control.updateSelectedTime(minutesTumbler.currentIndex, hoursTumbler.currentIndex)
139 }
140
141 background: Rectangle
142 {
143 visible: checked
144 color: checked ? Maui.Theme.highlightColor : hovered ? Maui.Theme.focusColor : "transparent"
145 radius: Maui.Style.radiusV
146 }
147 }
148
149 }
150
151 Tumbler
152 {
153 id: minutesTumbler
154 model: 60
155 spacing: Maui.Style.space.medium
156
157 currentIndex: control.selectedMinute
158
159 delegate: Button
160 {
161 font.bold: checked
162 checked : index === Tumbler.tumbler.currentIndex
163 text: formatText(Tumbler.tumbler.count, modelData)
164 opacity: 1.0 - Math.abs(Tumbler.displacement) / (Tumbler.tumbler.visibleItemCount / 2)
165
166 onClicked:
167 {
168 Tumbler.tumbler.currentIndex = modelData
169 control.updateSelectedTime(minutesTumbler.currentIndex, hoursTumbler.currentIndex)
170 }
171
172 background: Rectangle
173 {
174 visible: checked
175 color: checked ? Maui.Theme.highlightColor : hovered ? Maui.Theme.focusColor : "transparent"
176 radius: Maui.Style.radiusV
177 }
178 }
179 }
180 }
181 }
182
183 /**
184 * @brief
185 * @param hour
186 */
187 function formatUTCHour(hour : int) : int
188 {
189 if(hour > 12)
190 {
191 return hour - 12;
192 }
193
194 return hour
195 }
196
197 /**
198 * @brief
199 * @param hour
200 * @param format
201 */
202 function formatHourToUTC(hour : int, format : string) : int
203 {
204 if(format == "AM")
205 {
206 if(hour >= 11)
207 {
208 return 0;
209 }
210
211 return hour + 1
212 }
213
214
215 if(hour >= 11)
216 {
217 return 23
218 }
219
220 return 12 + hour +1;
221 }
222
223 /**
224 * @brief
225 * @param count
226 * @param modeldata
227 */
228 function formatText(count : int, modelData : int) : string
229 {
230 var data = count === 12 ? modelData + 1 : modelData;
231 return data.toString().length < 2 ? "0" + data : data;
232 }
233
234 /**
235 * @brief
236 * @param minute
237 * @param hour
238 * @param format
239 */
240 function updateSelectedTime(minute, hour, format = control.format)
241 {
242 control.selectedMinute = minute
243 control.selectedHour = formatHourToUTC(hour, format)
244
245 var newdate = new Date()
246
247 newdate.setHours(control.selectedHour)
248 newdate.setMinutes(control.selectedMinute)
249
250 control.selectedTime = newdate
251
252 console.log("UPDATING TIMEW", control.selectedTime.getHours(), control.selectedTime.getMinutes(), hour, minute, format, control.selectedTime.toLocaleTimeString())
253 }
254
255}
transparent
This file is part of the KDE documentation.
Documentation copyright © 1996-2024 The KDE developers.
Generated on Fri Nov 22 2024 12:07:04 by doxygen 1.12.0 written by Dimitri van Heesch, © 1997-2006

KDE's Doxygen guidelines are available online.