如何取消 QDate 选择？答案

【问题标题】：How to cancel a QDate choose?如何取消 QDate 选择？
【发布时间】：2021-01-20 11:46:12
【问题描述】：

我在 Vue2.JS 项目中使用 Quasar。我有一个 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>

谢谢。

【问题讨论】：

标签： javascript vuejs2 quasar qdate

【解决方案1】：

要在单击保存或关闭时执行某个功能，为此，根据documentation，您需要为“QPopupEdit”组件实现“validate”属性，并且如果您想向该组件显示验证错误您使用的元素，您需要添加“错误”和“属性。错误消息”我附上一个例子

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/

【讨论】：