Is there a way to retract a QDate selection?

I am currently using Quasar within a Vue2.JS project. I have implemented a QDate component connected to a QPopupEdit, which includes buttons for canceling and setting the date. I am looking to trigger a specific function when the "set" button is clicked. If a certain condition is met, I would like to prevent this action without hiding the QDate and QPopupEdit components.

Below is the code snippet:

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

Any assistance would be greatly appreciated.

javascriptvuejs2quasarqdate

Answer №1

When you want to trigger a function upon clicking save or close, make sure to refer to the documentation. It mentions that you must include the "validate" property in the "QPopupEdit" component. Additionally, if you wish to display validation errors for a specific element, add the "error" and "error-message" properties as shown in the example below:

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/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I execute a basic query in jQuery or JavaScript based on a selected value that changes

After successfully retrieving the dropdown selection value with alert(selectedString) in this scenario, I am now looking to utilize that value for querying a table using mysqli and PHP. What is the best approach for querying a database table based on the ...

javascriptphpjquerymysqli

The NodeJS program fails to authenticate the Google Calendar API integration, resulting in an undefined response even when valid credentials and tokens are provided

I am seeking assistance with my Google Calendar API integration in NodeJS. I am encountering an error message indicating that the daily limit for unauthenticated use has been exceeded, requiring signup for continued usage. Despite researching this issue on ...

javascriptnode.jsgoogle-calendar-api

Converting multiple tiff image files into a single image in Angular 9: A step-by-step guide

I am currently developing a web application using Angular 9. I am looking to incorporate a feature that will enable the conversion of multiple Tiff images into a single PDF or window.URL.createObjectURL(blob) of pdf. let images = ["http://netghost.nar ...

javascriptangulartypescriptpdfnpm

Having trouble inputting text into the text area using Selenium WebDriver with C#

Here is the original code snippet: I am having trouble entering text in the text box below. Can you please help me figure out how to enter text in this text box? <td id="ctl00_cRight_ucSMS_redSMSBodyCenter" class="reContentCell" ...

javascriptc#seleniumselenium-webdrivercss-selectors

Switching the visibility of a DIV by clicking on a list item

Struggling with a seemingly simple function for way too long now. The task is to show a hidden div with information on an item when it's clicked, without using jQuery. Tried multiple examples from various sources but nothing seems to work. Hoping for ...

javascripthtmlcss

Filtering Date Ranges in Ant Design Tables

I have been attempting to add a date range filter to my Ant Design table by using the code provided here, but unfortunately, I have not had any success with it yet. It seems like it may not be compatible with the latest versions of Ant Design. Has anyone ...

javascriptreactjsantd

AngularJS input masking

I am trying to implement a mask for an input field where users can only input symbols following a specific template: "01ABC2345-67-89" - two digits, followed by three characters, then four digits, a "-", two more digits, another "-" and finally, two more d ...

javascriptangularjsvalidationinputmasking

Using jQuery to reset the position of animated divs

I am currently working on a code that expands and centers a div when hovered upon using the following script: $(document).ready(function(){ //animation on hover $('#sliding_grid li').hover(function() { ...

javascriptjquerycss

Maintain a variable within the scope of _.forEach() that is separate from the array being iterated

Occasionally, I encounter a scenario where objects need to be pushed into a separate array based on the content of a looped array: let customArray: any[]; _.forEach(iteratedArray, (item:any) => { // some irrelevant code... customArray.push(item ...

javascripttypescriptforeachlodash

Looking to incorporate an Ajax feature that allows for updating dropdown menus in each row of the database

Please find below the UI screenshot highlighting the dropdown menu: What I am looking for? I would like the option selected in the dropdown menu to be updated for each specific row in the database using AJAX. Below are the codes I have written. As a beg ...

javascriptphpjqueryajaxcodeigniter

Error 403 Forbidden occurs when trying to upload a file to AWS W3 using a signed URL generated with Brightcove in Nodejs

I'm having trouble uploading a video to Brightcove by following the steps outlined in this article: Source File Upload API Dynamic Ingest The initial 2 steps go smoothly. However, when I request the S3 URLs, the response looks like this: { ...

javascriptnode.jsamazon-s3brightcove

The Uib-Dropdown functionality is not functioning properly when placed within the body of an HTML view

After correctly installing the following dependencies: "ui-bootstrap": "0.12.2", "ngAnimate": "1.5.5", "AngularJs": "1.5.5 I encountered an issue with creating a dropdown menu in my HTML view. Despite no visible errors and successful implementati ...

javascriptangularjsangular-ui-bootstrapng-animate

Concealing website links in the browser's address bar

Running my own website on a personal server with Ubuntu server, I noticed that my public IP address is displayed in the status bar when visitors browse my site or hover over links. Even after purchasing a domain name from godaddy, I couldn't find an o ...

phpjavascripthtmlubuntu-serverurl-masking

Error message indicating a problem with the locator By.linkText that contains dots in Selenium: TypeError - Invalid locator

I've searched through other resources for solutions, but I can't find anything that addresses my specific issue. The error message I'm encountering is TypeError: Invalid locator. Here's a snippet of my code (where I suspect the problem ...

javascriptseleniumselenium-webdriverlinktextpartiallinktext

Tips for implementing a switch-case statement with variable formats that may not always be

switch (req.path) { case "/api/posts": console.log("posts"); break; case "/api/posts/tags/*": // the part * is always changing depending on user input console.log("tags"); break; case "/api/best": console.log ...

javascriptnode.jsexpress

Issue with Sequelize Associate function not functioning correctly

I've been attempting to connect two tables in Sequelize, but I keep encountering the SequelizeEagerLoadingError indicating that one table is not associated with the other, despite trying all the suggested solutions on this platform. The tables in que ...

javascriptnode.jspostgresqlexpresssequelize.js

The jQuery form submission functionality fails to execute properly in the presence of a callback function

I have been on the hunt for a solution to this problem, but unfortunately I haven't been able to find one. The issue at hand is that when using the jQuery Submit function with a button and a callback function defined, it doesn't seem to work. Her ...

javascriptjquery

The PHP file on the server is missing the mandatory "event" parameter for the EventSource

Explaining this issue was a bit of a challenge. I've set up a Javascript EventSource object with some customized event handlers like so: var source = new EventSource('updates.php'); source.addEventListener('add', addHandler, fals ...

javascriptphpeventsource

Struggling with React Js and need some assistance?

I'm completely new to React Js and encountering issues with my code. Here's what I have: Here is the content of my script file named Main.jsx. This file gets compiled by React, and the output is stored in main.js under the 'dist' folde ...

javascripthtmlreactjsdomjsx

What is causing JavaScript to pass the parameter name instead of the element?

Information: I am currently organizing an array of names into two separate arrays - one for names starting with A-M and the other for names starting with N-Z. My goal is to have each entry represented as an object with the name as the property and an empty ...

javascriptarraysregexsortingobject