Skip to content

Commit

Permalink
fix: QDatetimePicker Mat: fixes and full responsive (#2559)
Browse files Browse the repository at this point in the history
  • Loading branch information
@rstoenescu
rstoenescu committed Sep 14, 2018
1 parent 78dba50 commit f62911a
Show file tree
Hide file tree
Showing 4 changed files with 233 additions and 168 deletions.
109 changes: 105 additions & 4 deletions dev/components/form/datetime-responsive.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
@input="value => log('@input', value)"
@focus="log('@focus')"
@blur="log('@blur')"
placeholder="Normal"
/>
<q-datetime
class="q-my-md"
Expand All @@ -28,6 +29,7 @@
@input="value => log('@input', value)"
@focus="log('@focus')"
@blur="log('@blur')"
placeholder="Minimal"
/>
<div class="q-my-md row gutter-md justify-center">
<div>
Expand All @@ -39,6 +41,20 @@
@input="value => log('@input', value)"
@focus="log('@focus')"
@blur="log('@blur')"
placeholder="Normal"
/>
</div>
<div>
<q-datetime
v-model="model"
:type="computedType"
default-view="year"
clearable
@change="value => log('@change', value)"
@input="value => log('@input', value)"
@focus="log('@focus')"
@blur="log('@blur')"
placeholder="Normal default year"
/>
</div>
<div>
Expand All @@ -51,6 +67,21 @@
@input="value => log('@input', value)"
@focus="log('@focus')"
@blur="log('@blur')"
placeholder="Minimal"
/>
</div>
<div>
<q-datetime
v-model="model"
:type="computedType"
default-view="year"
clearable
minimal
@change="value => log('@change', value)"
@input="value => log('@input', value)"
@focus="log('@focus')"
@blur="log('@blur')"
placeholder="Minimal default year"
/>
</div>
</div>
Expand All @@ -63,6 +94,7 @@
@input="value => log('@input', value)"
@focus="log('@focus')"
@blur="log('@blur')"
placeholder="Normal modal"
/>
<q-datetime
v-model="model"
Expand All @@ -74,7 +106,66 @@
@input="value => log('@input', value)"
@focus="log('@focus')"
@blur="log('@blur')"
placeholder="Minimal modal"
/>
<div class="q-my-md row gutter-md justify-center">
<div>
<q-datetime
v-model="model"
:type="computedType"
clearable
modal
@change="value => log('@change', value)"
@input="value => log('@input', value)"
@focus="log('@focus')"
@blur="log('@blur')"
placeholder="Normal modal"
/>
</div>
<div>
<q-datetime
v-model="model"
:type="computedType"
default-view="year"
clearable
modal
@change="value => log('@change', value)"
@input="value => log('@input', value)"
@focus="log('@focus')"
@blur="log('@blur')"
placeholder="Normal modal default year"
/>
</div>
<div>
<q-datetime
v-model="model"
:type="computedType"
clearable
modal
minimal
@change="value => log('@change', value)"
@input="value => log('@input', value)"
@focus="log('@focus')"
@blur="log('@blur')"
placeholder="Minimal modal"
/>
</div>
<div>
<q-datetime
v-model="model"
:type="computedType"
default-view="year"
clearable
modal
minimal
@change="value => log('@change', value)"
@input="value => log('@input', value)"
@focus="log('@focus')"
@blur="log('@blur')"
placeholder="Minimal modal default year"
/>
</div>
</div>
<div class="q-my-md row gutter-md justify-center">
<div>
<q-datetime-picker
Expand Down Expand Up @@ -138,8 +229,8 @@
@focus="log('@focus')"
@blur="log('@blur')"
/>
<div class="q-my-md">
<div style="width: 290px; outline: 2px solid red">
<div class="q-my-md row gutter-sm">
<div class="col-md-2">
<q-datetime-picker
v-model="model"
:type="computedType"
Expand All @@ -150,12 +241,22 @@
@blur="log('@blur')"
/>
</div>
<div style="width: 320px; outline: 2px solid red">
<div class="col-md-3">
<q-datetime-picker
v-model="model"
:type="computedType"
clearable
@change="value => log('@change', value)"
@input="value => log('@input', value)"
@focus="log('@focus')"
@blur="log('@blur')"
/>
</div>
<div class="col-md-4">
<q-datetime-picker
v-model="model"
:type="computedType"
clearable
minimal
@change="value => log('@change', value)"
@input="value => log('@input', value)"
@focus="log('@focus')"
Expand Down
25 changes: 9 additions & 16 deletions src/components/datetime/QDatetime.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,14 +100,7 @@ export default {
}

const target = this.$refs.target
if (target) {
if (this.defaultView) {
target.setView(this.defaultView)
}
else {
target.setView()
}
}
target && target.setView(this.defaultView, true)

this.model = clone(this.computedValue)
this.focused = true
Expand Down Expand Up @@ -160,12 +153,11 @@ export default {
}
})
},
__resetView () {
__scrollView () {
// go back to initial entry point for that type of control
// if it has defaultView it's going to be reapplied anyway on focus
if (!this.defaultView && this.$refs.target) {
this.$refs.target.setView()
}
const target = this.$refs.target
target && target.__scrollView()
},

__getPicker (h, modal) {
Expand Down Expand Up @@ -195,7 +187,6 @@ export default {
canClose: () => {
if (this.isPopover) {
this.hide()
this.__resetView()
}
}
}
Expand All @@ -216,7 +207,6 @@ export default {
click: () => {
this.__onHide(false, true)
this.hide()
this.__resetView()
}
}
}),
Expand All @@ -233,7 +223,6 @@ export default {
click: () => {
this.__onHide(true, true)
this.hide()
this.__resetView()
}
}
})
Expand Down Expand Up @@ -295,7 +284,10 @@ export default {
},
slot: 'after',
on: {
show: this.__onFocus,
show: ev => {
this.__onFocus(ev)
this.__scrollView()
},
hide: () => this.__onHide(true, true)
}
}, this.__getPicker(h))
Expand All @@ -311,6 +303,7 @@ export default {
transition: this.transition
},
on: {
show: this.__scrollView,
dismiss: () => this.__onHide(false, true)
}
}, this.__getPicker(h, true)),
Expand Down
Loading

0 comments on commit f62911a

Please sign in to comment.