QDate formatting to something other than YYYY/MM/DD?

[daveline]

Just curious if it possible in Quasar 1 for QDate with QInput to display formatting to something other than YYYY/MM/DD. My users prefer to see their dates in MM/DD/YYYY format.

[Eelke]

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>

[daveline]

@eelke Perfect thanks!

[jubalj]

Same issue, just curious if there is a better solution in the current quasar version?