[upvote this issue]

Someone find a sollution allready? It is annoying that the QDate-dialog does not close after selecting.

The sollution:
<q-popup-proxy ref=“qDateProxy” …
<q-date @input="$refs.qDateProxy.hide()"…

is ugly and, indeed, close the dialog at year or month selection.

Yes, a quick and dirty workaround…

It’s such a normal and predictable kind of functionality… it should be a property of the component: ‘closeonselect = [true/false]’…

Mine prefer DD/MM/YYYY

I made a ugly wrapper-component, but I think it can be done much easier. Can’t find how though…

The component:

<template>
<q-input :value=“computedDatum” :readonly=“readOnly” @focus=“verplaatsFocus” :label=“label”>
<template v-slot:append>
<q-icon name=“event” class=“cursor-pointer”>
<q-popup-proxy ref=“qDateProxy” @show=“readOnly = true” @hide=“readOnly = false”>
<q-date v-model=“displayValue” minimal @input="$refs.qDateProxy.hide()"/>
</q-popup-proxy>
</q-icon>
</template>
</q-input>
</template>

<script>
import { date } from ‘quasar’

export default {
props: [
‘label’,
‘value’
],
data: () => ({
readOnly: false
}),
computed: {
computedDatum: {
get: function () {
return this.formatteerDatum(this.displayValue)
},
set: function () {
this.displayValue = null
}
},
displayValue: {
get: function () {
return date.formatDate(this.value, ‘YYYY/MM/DD’)
},
set: function (modifiedValue) {
this.$emit(‘input’, modifiedValue)
}
}
},
methods: {
verplaatsFocus () {
document.activeElement.blur()
this.$refs.qDateProxy.show()
},
formatteerDatum (x) {
return date.formatDate(x, ‘DD/MM/YYYY’)
}
}
}
</script>

[upvote this issue]

Someone find a sollution allready? It is annoying that the QDate-dialog does not close after selecting.

The sollution:
<q-popup-proxy ref=“qDateProxy” …
<q-date @input="$refs.qDateProxy.hide()"…

is ugly and, indeed, close the dialog at year or month selection.