Is there a way to toggle the opening and closing of a q-popup by simply clicking on the q-date element

Within the following code snippet, there is a date present. Is it possible to exclusively extract the year from q-date? I am aiming to automatically close the div when the model or container reaches a length of 4, which I have already achieved. However, upon clicking the date, the q-date does not appear since I have set it to false. How can I revert it back to true?

<q-input
      style="width: 200px"
      outlined
      v-model="advance_search.advance_year_option_year_start"
      mask="####"
      label="Start Year"
      stack-label
    >
      <template v-slot:append>
        <q-icon name="event" class="cursor-pointer"  >
          <q-popup-proxy
          v-if="qDateClose"
            cover
            transition-show="scale"
            transition-hide="scale"
          >
            <q-date

            v-model="advance_search.advance_year_option_year_start"
            @update:model-value="closeQDate(advance_search.advance_year_option_year_start)"
            default-view="Years"
            mask="YYYY"
            emit-immediately
            minimal
          />
          </q-popup-proxy>

        </q-icon>
      </template>
    </q-input>

Included JavaScript portion:

let qDateClose = ref(true);
    
let closeQDate = (value) => {
    if(value.length == 4){
      qDateClose.value = false;
    
    }
};

Alternatively, feel free to suggest another approach.

javascriptvue.jsfrontendquasar-framework

Answer №1

Following the advice in @Sarsa's response proved to be successful:

const { ref } = Vue

const app = Vue.createApp({
  setup () {
    return {
      date: ref('2019/02/01'),
      dateClosePopup: ref(true)
    }
  }
})

app.use(Quasar, { config: {} })
app.mount('#q-app')
<!--
Derived from:
https://quasar.dev/vue-components/date/#example--with-qinput
-->
<div id="q-app" style="min-height: 100vh;">
<div class="q-pa-md" style="max-width: 300px">
    <q-input filled v-model="date" mask="date" :rules="['date']">
      <template v-slot:append>
        <q-icon name="event" class="cursor-pointer">
          <q-popup-proxy cover transition-show="scale" transition-hide="scale">
            <q-date v-model="date"
                      v-close-popup="dateClosePopup"
                      @navigation="dateClosePopup=false"
                      @update:model-value="dateClosePopup=true"
>
              <div class="row items-center justify-end">
                <q-btn v-close-popup label="Close" color="primary" flat></q-btn>
              </div>
            </q-date>
          </q-popup-proxy>
        </q-icon>
      </template>
    </q-input>
  </div>
</div>

Answer №2

One potential solution is to utilize the v-close-popup function.

During the @navigate event, you can set it to true and then during the @update:model-value event, set it to false.

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

The latest changes in the MongoDB route and model may result in either data deletion or an error being thrown

I've been searching for quite some time now, and I haven't found a similar issue to the one I am facing. Working on a MERN stack application with four routes, three are functioning properly. However, the fourth route and the database model are c ...

javascriptmongodbexpressmongoose

Tips on populating JSON data with AngularJS

Struggling to populate a searchable dropdown list with JSON data using AngularJS. After pushing the JSON data to the server, I'm able to receive a response when using the GET method. However, I'm unsure of how to query the JSON data and display i ...

javascriptjqueryangularjsjsonajax

What could be causing the d3.js pie chart transition to malfunction?

Today I am experimenting with d3.js to create a unique pie chart from scratch. While following tutorials here as my base, there were modifications made in the code to add personal touches and customization. The challenge arose during Step 6 when introduc ...

javascriptpythond3.jscharts

Updating Angular model remotely without relying solely on the controller

I am struggling to call the addRectangleMethod method from my Javascript code in order to retrieve server-side information into the Angular datamodel. However, I keep encountering an error stating that the method I'm trying to call is undefined. It&ap ...

javascripthtmlangularjstypescript

What is the best way to restrict the input year on @mui/x-date-pickers to a certain range?

Is there a way to restrict the input year range when using @mui/x-date-pickers? I want to limit it from 1000 to 2023 instead of being able to enter years like 0000 or 9999. https://i.stack.imgur.com/0p6j3.jpg I have tried adding a mask to InputProps in my ...

javascriptnext.jsmaterial-uidatepicker

Guide to setting up Gatsby CLI and Gatsby version 2

Currently, I am working on a project that utilizes Gatsby v2 in its package.json file. However, to run the project, I need to globally install Gatsby-cli as per the documentation. Strangely, the global installation of Gatsby-cli also installs Gatsby v4, ca ...

javascriptnode.jsnpmgatsbynpm-install

The initialization of the Angular service is experiencing issues

I have a service in place that checks user authentication to determine whether to redirect them to the login page or the logged-in area. services.js: var servicesModule = angular.module('servicesModule', []); servicesModule.service('login ...

javascriptangularjsionic-frameworkangularjs-service

Vue.js component mismatch in the layout

Attempting to set up a Vue application with vuetify while incorporating layouts. As a newcomer to Vue, I may have made some beginner errors. Here is the structure of my app: main.js // The Vue build version to load with the `import` command // (runtime- ...

javascriptvue.jsvue-routervuetify.js

Is there a way to include a vertical scrollbar within the modal dialog using Vuetify components?

Here is an example of my code: <div id="app"> <v-app> <v-content> <v-container> <v-dialog v-for='foo, k in foos' :key='foo.id' :close-on-content-click="false" ...

vue.jsdatepickermodal-dialogvue-componentvuetify.js

Why does JavaScript often return the constructor of an object instead of false?

Seeking assistance in resolving issues with the functionality of my script. function CatFactory(cat) // Cat constructor { for (y in cats) { if (cats[y].color == cat.color) {return false;} // return false if already in the array ...

javascriptarraysoopobject

Unable to activate style.display function in Vue JS color selector project

Currently wrapping up a project involving gradient swatches and moving on to the final stage of the republish function. I have two name forms: one is utilized in the initial creation of the swatch on keypress, while the other is intended for the edit funct ...

javascriptvue.js

Using a button click to toggle the vue-ctk-date-time-picker in VueJS

Currently, I am utilizing the Vue component - https://github.com/chronotruck/vue-ctk-date-time-picker within my own component. However, I am encountering an issue where I would like to maintain the component's original functionality while having a but ...

javascriptvue.jsdatetimenpm

Determine the total number of selected items in MagicSuggest when it loses focus

I have been working with MagicSuggest and I am currently facing an issue where I need to retrieve the length of selections on a blur event. Interestingly, my code functions perfectly fine when a new selection is added using the ENTER key, but it fails when ...

javascriptjquerymagicsuggest

The jQuery scrollTo plugin fails to consider the "over" argument

Both of these commands will move the content to the same spot (the left edge of the designated element) $("#gallery").stop().scrollTo(thisP, 400, {offset:{top:0, left:-$(window).width()/2}}, {over:0.5}); $("#gallery").stop().scrollTo(thisP, 400, {offset: ...

javascriptjqueryhtmlscrollto

Saving div data to a database using Ajax techniques

I have a project where I need to store div content in a database. The content looks like this: <span>name:</span><input type="text" id="inputid" value="John"><br /> To fetch this content successfully, I used innerHTML method and s ...

javascriptphpjquery

vue-router: Maintaining routing consistency despite argument changes

I am currently working on verifying the unsaved form route before leaving, and in case the user declines, I want to prevent changing the route. Most of it is functioning properly with beforeRouteLeave: function (to, from, next) { ...

javascriptvuejs2vue.jsvue-router

Trouble arises when jquery's "position().top" clashes with the CSS3 property "transform: scale()"

Currently, I am working on adding a font resizer feature to my editing tool. To implement this, I made some changes to the text elements where their origin is now set to the bottom left corner. The normal version of the tool works perfectly fine, but when ...

javascriptjqueryhtmlcsscss-transforms

How to hash AngularJS template htmls with webpack

I recently made the transition from using gulp to webpack for our AngularJS application. While in the gulp version, I utilized the rev plugin to hash all files (css, js, and html), I am facing difficulty adding a hash to the html templates in webpack. This ...

javascriptangularjswebpack

Leveraging the 'passport.isAuthenticated()' method for evaluating numerous user roles within a Node.js application

Below is the code snippet for my custom isAuthenticated function: var isAuthenticated = function (req, res, next) { if (req.isAuthenticated()) return next(); res.redirect('/'); }; Here's a route that uses PassportJs with the custom isA ...

javascriptnode.jsexpresspassport.jspassport-local

Extracting data from the Vue object variables within a component

I'm brand new to Vue and I'm struggling with accessing data in the main Vue instance from a component. In my Vue instance, I have: var vm = new Vue({ computed: {}, data: { show: true }, And in the component, I'd like to d ...

vue.js