How to cancel a QDate choose?

Question

I use Quasar in a Vue2.JS project. I have a QDate, linked with a QPopupEdit ( with a cancel and a set button ). I want to run a specific function when clicking set. If a condition is true, i want to cancel this setting without masking the QDate and the QPopupEdit.

Here the code :

<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>

Thanks.

Answer 1

To execute a function when you click save or close, for that, according to the documentation, you need to implement the "validate" property to the "QPopupEdit" component and if you want to show the validation error to the element you use, you need to add the "error" and "properties. error-message "I attach an example

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/