Skip to content

Commit cdfe113

Browse files
pdanpdanrstoenescu
pdanpdan
authored and
rstoenescu
committed
QDatetimePicker Mat: fixes and full responsive (quasarframework#2559)
1 parent 87b1c08 commit cdfe113

File tree

5 files changed

+235
-165
lines changed

5 files changed

+235
-165
lines changed

‎dev/components/form/datetime-responsive.vue‎

Lines changed: 105 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
@input="value => log('@input', value)"
1717
@focus="log('@focus')"
1818
@blur="log('@blur')"
19+
placeholder="Normal"
1920
/>
2021
<q-datetime
2122
class="q-my-md"
@@ -28,6 +29,7 @@
2829
@input="value => log('@input', value)"
2930
@focus="log('@focus')"
3031
@blur="log('@blur')"
32+
placeholder="Minimal"
3133
/>
3234
<div class="q-my-md row gutter-md justify-center">
3335
<div>
@@ -39,6 +41,20 @@
3941
@input="value => log('@input', value)"
4042
@focus="log('@focus')"
4143
@blur="log('@blur')"
44+
placeholder="Normal"
45+
/>
46+
</div>
47+
<div>
48+
<q-datetime
49+
v-model="model"
50+
:type="computedType"
51+
default-view="year"
52+
clearable
53+
@change="value => log('@change', value)"
54+
@input="value => log('@input', value)"
55+
@focus="log('@focus')"
56+
@blur="log('@blur')"
57+
placeholder="Normal default year"
4258
/>
4359
</div>
4460
<div>
@@ -51,6 +67,21 @@
5167
@input="value => log('@input', value)"
5268
@focus="log('@focus')"
5369
@blur="log('@blur')"
70+
placeholder="Minimal"
71+
/>
72+
</div>
73+
<div>
74+
<q-datetime
75+
v-model="model"
76+
:type="computedType"
77+
default-view="year"
78+
clearable
79+
minimal
80+
@change="value => log('@change', value)"
81+
@input="value => log('@input', value)"
82+
@focus="log('@focus')"
83+
@blur="log('@blur')"
84+
placeholder="Minimal default year"
5485
/>
5586
</div>
5687
</div>
@@ -63,6 +94,7 @@
6394
@input="value => log('@input', value)"
6495
@focus="log('@focus')"
6596
@blur="log('@blur')"
97+
placeholder="Normal modal"
6698
/>
6799
<q-datetime
68100
v-model="model"
@@ -74,7 +106,66 @@
74106
@input="value => log('@input', value)"
75107
@focus="log('@focus')"
76108
@blur="log('@blur')"
109+
placeholder="Minimal modal"
77110
/>
111+
<div class="q-my-md row gutter-md justify-center">
112+
<div>
113+
<q-datetime
114+
v-model="model"
115+
:type="computedType"
116+
clearable
117+
modal
118+
@change="value => log('@change', value)"
119+
@input="value => log('@input', value)"
120+
@focus="log('@focus')"
121+
@blur="log('@blur')"
122+
placeholder="Normal modal"
123+
/>
124+
</div>
125+
<div>
126+
<q-datetime
127+
v-model="model"
128+
:type="computedType"
129+
default-view="year"
130+
clearable
131+
modal
132+
@change="value => log('@change', value)"
133+
@input="value => log('@input', value)"
134+
@focus="log('@focus')"
135+
@blur="log('@blur')"
136+
placeholder="Normal modal default year"
137+
/>
138+
</div>
139+
<div>
140+
<q-datetime
141+
v-model="model"
142+
:type="computedType"
143+
clearable
144+
modal
145+
minimal
146+
@change="value => log('@change', value)"
147+
@input="value => log('@input', value)"
148+
@focus="log('@focus')"
149+
@blur="log('@blur')"
150+
placeholder="Minimal modal"
151+
/>
152+
</div>
153+
<div>
154+
<q-datetime
155+
v-model="model"
156+
:type="computedType"
157+
default-view="year"
158+
clearable
159+
modal
160+
minimal
161+
@change="value => log('@change', value)"
162+
@input="value => log('@input', value)"
163+
@focus="log('@focus')"
164+
@blur="log('@blur')"
165+
placeholder="Minimal modal default year"
166+
/>
167+
</div>
168+
</div>
78169
<div class="q-my-md row gutter-md justify-center">
79170
<div>
80171
<q-datetime-picker
@@ -138,8 +229,8 @@
138229
@focus="log('@focus')"
139230
@blur="log('@blur')"
140231
/>
141-
<div class="q-my-md">
142-
<div style="width: 290px; outline: 2px solid red">
232+
<div class="q-my-md row gutter-sm">
233+
<div class="col-md-2">
143234
<q-datetime-picker
144235
v-model="model"
145236
:type="computedType"
@@ -150,12 +241,22 @@
150241
@blur="log('@blur')"
151242
/>
152243
</div>
153-
<div style="width: 320px; outline: 2px solid red">
244+
<div class="col-md-3">
245+
<q-datetime-picker
246+
v-model="model"
247+
:type="computedType"
248+
clearable
249+
@change="value => log('@change', value)"
250+
@input="value => log('@input', value)"
251+
@focus="log('@focus')"
252+
@blur="log('@blur')"
253+
/>
254+
</div>
255+
<div class="col-md-4">
154256
<q-datetime-picker
155257
v-model="model"
156258
:type="computedType"
157259
clearable
158-
minimal
159260
@change="value => log('@change', value)"
160261
@input="value => log('@input', value)"
161262
@focus="log('@focus')"

‎src/components/datetime/QDatetime.js‎

Lines changed: 10 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -121,14 +121,7 @@ export default {
121121
}
122122
if (process.env.THEME === 'mat') {
123123
const target = this.$refs.target
124-
if (target) {
125-
if (this.defaultView) {
126-
target.setView(this.defaultView)
127-
}
128-
else {
129-
target.setView()
130-
}
131-
}
124+
target && target.setView(this.defaultView, true)
132125
}
133126
this.model = clone(this.computedValue)
134127
this.focused = true
@@ -181,11 +174,10 @@ export default {
181174
}
182175
})
183176
},
184-
__resetView () {
185-
// go back to initial entry point for that type of control
186-
// if it has defaultView it's going to be reapplied anyway on focus
187-
if (!this.defaultView && this.$refs.target) {
188-
this.$refs.target.setView()
177+
__scrollView () {
178+
if (process.env.THEME === 'mat') {
179+
const target = this.$refs.target
180+
target && target.__scrollView()
189181
}
190182
},
191183

@@ -219,7 +211,6 @@ export default {
219211
canClose: () => {
220212
if (this.isPopover) {
221213
this.hide()
222-
this.__resetView()
223214
}
224215
}
225216
}
@@ -240,7 +231,6 @@ export default {
240231
click: () => {
241232
this.__onHide(false, true)
242233
this.hide()
243-
this.__resetView()
244234
}
245235
}
246236
}),
@@ -257,7 +247,6 @@ export default {
257247
click: () => {
258248
this.__onHide(true, true)
259249
this.hide()
260-
this.__resetView()
261250
}
262251
}
263252
})
@@ -319,7 +308,10 @@ export default {
319308
},
320309
slot: 'after',
321310
on: {
322-
show: this.__onFocus,
311+
show: ev => {
312+
this.__onFocus(ev)
313+
this.__scrollView()
314+
},
323315
hide: () => this.__onHide(true, true)
324316
}
325317
}, this.__getPicker(h))
@@ -333,6 +325,7 @@ export default {
333325
transition: this.transition
334326
},
335327
on: {
328+
show: this.__scrollView,
336329
dismiss: () => this.__onHide(false, true)
337330
}
338331
}, this.__getPicker(h, true)),

0 commit comments

Comments
 (0)