如何取消QDate选择?

Question

我在一个ve2 . js项目中使用类星体。我有一个QDate，链接到一个QPopupEdit(取消和设置按钮)。我想运行一个特定的功能时，单击设置。如果一个条件为真，我想取消这个设置，而不屏蔽QDate和QPopupEdit。

代码如下:

<QPopupEdit
v-model="displayBirthday"
buttons
:label-set="$t('set')"
:label-cancel="$t('cancel')"
>
<QDate
:ref="'test'"
v-model="displayBirthday"
minimal
class="no-shadow"
mask="DD/MM/YYYY"
:locale="locale"
/>
</QPopupEdit>

谢谢。

Answer 1

要在单击保存或关闭时执行函数，根据文档，需要实现validate"属性添加到" qpopuedit "组件，如果您想要将验证错误显示给您使用的元素，则需要添加&;error&;和"属性。错误信息"我附加了一个示例

new Vue({
el: '#q-app',
data: function() {
return {
value: '5',
displayBirthday: '01/01/2021',
error: {
status: false,
msg: null
}
}
},
methods: {
validateDate(val) {
if (val == moment().format('DD/MM/YYYY')) {
this.error.status = true
this.error.msg = 'The date cannot be today'
return false
}
this.error.status = false
this.error.msg = ''
return true
}
}
})

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@quasar/extras/material-icons/material-icons.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/quasar/dist/quasar.min.css">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar/dist/quasar.umd.min.js"></script>
<script src="https://momentjs.com/downloads/moment.min.js"></script>
<div id="q-app">
<div class="q-pa-md">
<div class="cursor-pointer" style="width: 100px">
{{ displayBirthday }}
<q-popup-edit v-model="displayBirthday" buttons label-set="Save" label-cancel="Close" :validate="validateDate" @hide="validateDate">
<q-input outlined class="full-width" v-model="displayBirthday" label="fecha" mask="##/##/####" :error="error.status" :error-message="error.msg" @click="$refs.qDateProxy.show()">
<template v-slot:prepend>
<q-icon name="event"
class="cursor-pointer"
color="primary">
<q-popup-proxy ref="qDateProxy"
transition-show="scale"
transition-hide="scale">
<q-date v-model="displayBirthday"
@input="() => $refs.qDateProxy.hide()"
mask="DD/MM/YYYY"
validateDateFormat />
</q-popup-proxy>
</q-icon>
</template>
</q-input>
</q-popup-edit>
</div>
</div>
</div>

https://jsfiddle.net/idkc/2Ltgs3dp/45/