Qt Quick Control 1.x中是没有日期组件和时间组件，好在Qml够灵活，没有的东西可以自己来造。道生一，一生二，二生三，三生万物，瞬间回归到了哲学的本质。
时间控件
代码：
日期控件
基于时间控件的日期选择器,
时间组件和日期组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
import QtQuick 2.4
import QtQuick.Controls 1.4
Rectangle {
id: timeEdit
property string time
property int hour: 0
property int minute: 0
property int timePointWidth: 24
property int controlWidth: 20
property color selectionColor: 'blue'
property var theme: QtObject {
id: theme
objectName: "theme"
property string fontFamily: 'Microsoft YaHei'
property real fontSize: 14
property int fontWeight: Font.Normal
property color textColor: '#222222'
property color borderColor: '#D3D3D3'
}
border.width: 1
border.color: theme.borderColor
width: 80
height: 26
Row{
spacing:1
width: parent.width - control.width
height: parent.height
TextInput {
id: hours
height: parent.height
width: timePointWidth
color: theme.textColor
font {
family: theme.fontFamily
pixelSize: theme.fontSize - 1
weight: theme.fontWeight
}
selectByMouse: true
maximumLength: 2
selectionColor: timeEdit.selectionColor
mouseSelectionMode: TextInput.SelectWords
validator: IntValidator{bottom: 0; top: 23;}
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
text: hour < 10 ? '0'+ hour: hour >= 24 ? 0 : hour
onEditingFinished:{
hour = parseInt(hours.text.trim())
}
onActiveFocusChanged: {
if (activeFocus){
hours.selectAll();
minutes.deselect();
}
}
onTextChanged: {
if (activeFocus){
hours.selectAll();
minutes.deselect();
}
}
}
Text {
id: separator
width:6
height: parent.height
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
text: ":"
}
TextInput {
id: minutes
height: parent.height
width: timePointWidth
color: theme.textColor
font {
family: theme.fontFamily
pixelSize: theme.fontSize - 1
weight: theme.fontWeight
}
selectByMouse: true
maximumLength: 2
selectionColor: timeEdit.selectionColor
mouseSelectionMode: TextInput.SelectWords
validator: IntValidator{bottom: 0; top: 59;}
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
text: minute < 10 ? '0'+ minute: minute >= 60 ? 0 : minute
onEditingFinished:{
minute = parseInt(minutes.text.trim())
}
onActiveFocusChanged: {
if (activeFocus){
minutes.selectAll();
hours.deselect();
}
}
onTextChanged: {
if (activeFocus){
minutes.selectAll();
hours.deselect();
}
}
}
}
Rectangle{
id: control
width: controlWidth
anchors.right: parent.right
anchors.rightMargin: 1
anchors.top: parent.top
anchors.topMargin: 1
anchors.bottom: parent.bottom
anchors.bottomMargin: 1
Button{
width: parent.width
height: parseInt(parent.height / 2)
anchors.left: parent.left
anchors.top: parent.top
text: "︿"
onClicked: {
if (minutes.activeFocus){
minute = parseInt(minutes.text.trim())
minute = minute + 1;
if(minute > 59)
{
minute = 0
}
}else{
hour = parseInt(hours.text.trim())
hour = hour + 1;
if(hour > 23){
hour = 0;
}
if (!hours.activeFocus){
hours.selectAll();
}
}
}
}
Button{
width: parent.width
height: parseInt(parent.height / 2)
anchors.left: parent.left
anchors.bottom: parent.bottom
text: "﹀"
onClicked: {
if (minutes.activeFocus){
minute = parseInt(minutes.text.trim())
minute = minute - 1;
if(minute < 0){
minute = 59
}
}else{
hour = parseInt(hours.text.trim())
hour = hour - 1;
if(hour < 0){
hour = 23;
}
if (!hours.activeFocus){
hours.selectAll();
}
}
}
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
import QtQuick 2.7
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.1
import QtQuick.Controls.Styles 1.4
TextField
{
property date originDate: new Date() //原始时间
property string dateValue:"%1-%2-%3".arg(originDate.getFullYear()).arg(originDate.getMonth()+1).arg(originDate.getDate()); //显示的日期格式字符串
property alias selectedDate: calendar.selectedDate //获取设置后日期
property alias hour: timeEidt.hour //获取设置后小时
property alias minute: timeEidt.minute //获取设置后分钟
property bool showDropDownButton: true //是否显示下拉按钮
property bool canEditTime: false //是否允许设置时间
property int timeEditorHeight: 30
property var theme: QtObject {
id: theme
objectName: "theme"
property string fontFamily: 'Microsoft YaHei'
property real fontSize: 14
property int fontWeight: Font.Normal
property color textColor: '#222222'
property color borderColor: '#D3D3D3'
property color sameMonthDateTextColor: "#444"
property color selectedDateColor: Qt.platform.os === "osx" ? "#3778d0" : "#3778d0"
property color selectedDateTextColor: "white"
property color differentMonthDateTextColor: "#bbb"
property color invalidDatecolor: "#dddddd"
}
readOnly:true
width: 150
textColor: theme.textColor
font {
family: theme.fontFamily
pixelSize: theme.fontSize - 1
weight: theme.fontWeight
}
property string __timeFormatter: {
var formatter = ' %1';
if (hour < 10){
formatter = ' 0%1'
}
if(minute < 10){
formatter = formatter + ':0%2'
}else{
formatter =formatter + ':%2'
}
return formatter;
}
text: canEditTime ? dateValue + __timeFormatter.arg(hour).arg(minute) : dateValue
Rectangle{
id: container
anchors.topMargin: 0
anchors.top: parent.bottom
implicitHeight: canEditTime ? calendar.height + timeEditorHeight : calendar.height
implicitWidth: calendar.width
visible: false
border.width: 1
border.color: theme.borderColor
Calendar{
id: calendar
frameVisible: true
selectedDate: new Date()
activeFocusOnTab: true
onReleased: {
dateValue = Qt.binding(function(){
return "%1-%2-%3".arg(date.getFullYear()).arg(date.getMonth()+1).arg(date.getDate());
})
if (!canEditTime){
container.visible = false
}
}
style: CalendarStyle{
navigationBar: RowLayout{
width: parent.width
implicitWidth: parent.width
spacing: 2
Item{
Layout.preferredWidth: 4
}
Button{
Layout.alignment: Qt.AlignLeft
text: "〈"
onClicked: control.showPreviousMonth()
}
Label {
Layout.alignment: Qt.AlignHCenter
Layout.fillWidth: true
verticalAlignment: Text.AlignVCenter
antialiasing: true
font {
family: theme.fontFamily
weight: theme.fontWeight
}
color: theme.textColor
font.pixelSize: theme.fontSize + 2
text: {
var tempTitle = styleData.title.split(' ');
return tempTitle.length > 1 ? tempTitle[1] + ' ' + tempTitle[0] : styleData.title
}
horizontalAlignment: Text.AlignHCenter
}
Button{
Layout.alignment: Qt.AlignRight
text: "〉"
onClicked: control.showNextMonth()
}
Item{
Layout.preferredWidth: 4
}
}
dayOfWeekDelegate: Rectangle{
implicitHeight: 24
Text {
anchors.centerIn: parent
verticalAlignment: Text.AlignVCenter
antialiasing: true
font {
family: theme.fontFamily
weight: theme.fontWeight
}
color: theme.textColor
font.pixelSize: theme.fontSize - 1
text: {
switch(styleData.dayOfWeek){
case 0: return '日';
case 1: return '一';
case 2: return '二';
case 3: return '三';
case 4: return '四';
case 5: return '五';
case 6: return '六';
}
}
}
}
dayDelegate: Item {
Rectangle {
anchors.fill: parent
border.color: "transparent"
color: styleData.date !== undefined && styleData.selected ? theme.selectedDateColor : "transparent"
anchors.margins: styleData.selected ? -1 : 0
}
Label {
anchors.centerIn: parent
font.pointSize: 10
text: styleData.date.getDate()
verticalAlignment: Text.AlignVCenter
antialiasing: true
font {
family: theme.fontFamily
pixelSize: theme.fontSize
weight: theme.fontWeight
}
horizontalAlignment: Text.AlignHCenter
color: {
var color = theme.invalidDatecolor;
if (styleData.valid) {
color = styleData.visibleMonth ? theme.sameMonthDateTextColor : theme.differentMonthDateTextColor;
if (styleData.selected) {
color = theme.selectedDateTextColor;
}
}
return color;
}
}
}
}
}
RowLayout{
visible: canEditTime
height: timeEditorHeight - 2
width: parent.width
anchors.top: calendar.bottom;
anchors.left: parent.left
Item{
Layout.preferredWidth: 4
}
Text{
anchors.leftMargin: 4
Layout.preferredHeight: parent.height
Layout.preferredWidth: 40
Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
verticalAlignment: Text.AlignVCenter
antialiasing: true
font {
family: theme.fontFamily
pixelSize: theme.fontSize
weight: theme.fontWeight
}
color: theme.textColor
text: '时间:'
}
TimeEdit{
id: timeEidt
Layout.preferredHeight: parent.height - 2
Layout.preferredWidth: 80
selectionColor: theme.selectedDateColor
hour: originDate.getHours()
minute: originDate.getMinutes()
}
Item{
Layout.fillHeight: true
Layout.fillWidth: true
}
Button{
Layout.preferredWidth: 36
Layout.preferredHeight: 26
Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
text: '取消'
onClicked: {
selectedDate = originDate
timeEidt.hour = originDate.getHours();
timeEidt.minute = originDate.getMinutes();
container.visible = false
}
}
Button{
Layout.preferredWidth: 36
Layout.preferredHeight: 26
Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
text: '确定'
onClicked: {
container.visible = false
}
}
Item{
Layout.preferredWidth: 4
}
}
}
MouseArea{
enabled: !showDropDownButton
anchors.fill: parent
onClicked: {
container.visible = !container.visible
}
}
Button{
visible: showDropDownButton
id: downBtn
width: 22
anchors.right: parent.right
anchors.rightMargin: 0
anchors.bottom: parent.bottom
anchors.bottomMargin: 0
anchors.top: parent.top
anchors.topMargin: 0
text: "﹀"
onClicked: container.visible = !container.visible
}
}