Allow Vue to handle the registration of the datepicker event

Is there a way to notify Vue when the datepicker changes the selected date?

new Vue({
  el: '#app',
  data: {
    termin: ''
  },
  computed: {

  },
  methods: {

  }
})

This is just an input field:

<div id="app">

  <div class="uk-form-icon"><i class="uk-icon-calendar"></i>
    <input name="termin" v-model="termin" value="" placeholder="Choose date" type="text" data-uk-datepicker="{format:'DD.MM.YYYY'}" required="required">
  </div>
<p>
Date: {{termin}}
</p>
</div>

If you manually change the input field, Vue detects it, but not when using the date picker.

https://jsfiddle.net/Honkoman/dfohvcpk/

javascriptuikitvue.jsvuejs2

Answer №1

If you want to quickly implement this feature, you can easily add a handler for the hide event from the datepicker in your Vue application.

mounted(){
  $(this.$el).on('hide.uk.datepicker', e => this.termin = this.$refs.date.value)
}

You can check out this updated fiddle with the changes.

However, it's recommended to encapsulate jQuery interactions within a wrapper component for better organization.

Vue.component("datepicker",{
    props:["value"],
    template:`
    <input ref="date" name="termin" :value="value" placeholder="Choose date" type="text" data-uk-datepicker="{format:'DD.MM.YYYY'}" required="required">
  `,
  mounted(){
        $(this.$el).on('hide.uk.datepicker', e => this.$emit('input', this.$refs.date.value))
  }
})

Your template should be updated as follows:

<div class="uk-form-icon"><i class="uk-icon-calendar"></i>
  <datepicker v-model="termin"></datepicker>
</div>

Here is the link to the revised fiddle showcasing these modifications.

Answer №2

Combining UiKit events with Vue.set : Check out the FIDDLE

$('input[name="termin"]').on('hide.uk.datepicker', function(){
   Using Vue.set to update the 'termin' value in real time.
});

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

Adding Vuetify to your Astro project is a breeze!

Struggling with integrating Vuetify 3 into Astro using Vue integration. Here's my current setup: import { defineConfig } from 'astro/config'; import vue from '@astrojs/vue'; import vuetify from 'vite-plugin-vuetify'; / ...

vue.jsvuetify.jsvuejs3astrojs

Utilizing hooks to pass properties from a parent component to a child component

As someone who is new to react, I am currently facing an issue with passing props from a parent function to a child. It seems that the parameters "square_state" and "setSquare_state" are not being recognized in the useSquare or handle_square_click functi ...

javascriptreactjsreact-hooks

What is the best way to dynamically retrieve a URL and utilize it as a hyperlink using jQuery?

Is there a way to retrieve the current URL and use it as a link in jQuery? For example, if my browser is currently on page mysite.com/index.php?page=post&see=11, I would like to use this URL in my link and append /new/ after the domain name, like so: ...

javascriptphpjquery

Building a versatile login system for various roles and users using Vue.js

I am looking to develop a login page that caters to users with varying roles, such as customers and vendors. How should I go about creating this? ...

vue.jsjwtaxiosvue-router

Next.js: Dealing with special characters in YouTube video API snippet titles

Trying to find the perfect video snippet title without any special characters. Accessing the API: https://www.googleapis.com/youtube/v3/search, along with specifying snippet. The current output for snippet.title is as follows: I&#39;M GONNA CARRY ...

javascriptnext.jsyoutube-data-api

Vue and Axios encountered a CORS error stating that the 'Access-Control-Allow-Origin' header is missing on the requested resource

I've encountered the error above while using Axios for a GET request to an external API. Despite consulting the Mozilla documentation, conducting thorough research, and experimenting with different approaches, I haven't made any progress. I&apos ...

javascriptgetcorsvue.jsaxios

"Utilizing Angular's $http.post to extract data from resolved promises

Can you help me figure out how to successfully send data through $http.post that I receive from a function using $q.defer()? Here is the code snippet: HTML <input type='text' ng-model='name'/> <input type='file' id= ...

javascriptangularjspostfilereaderangular-promise

Utilize Jquery to dynamically modify the content on a webpage

I am looking to use Tampermonkey in order to reverse the text on a specific website, like BBC News. I have already started working on a script that can replace certain text, but I am facing difficulty in accessing all the text present on the page efficient ...

javascriptjquery

Ubuntu is experiencing a DNS problem. While the URL request works perfectly on MacOSX, it is unsuccessful on Ubuntu

A custom nodeJS script has been developed to utilize the require('request').post() method. The script executes successfully on MacOSX (Travis), however encounters issues on Ubuntu (Travis). To troubleshoot, experimentation with NodeJS 'https ...

javascriptnode.jsubuntutravis-ci

Gaining entry to a JSON object within an array

I've completed various courses on JSON and put in a lot of effort to troubleshoot this bug. However, it seems that my question is too specific and I require a practical example. JSON { "date": "2017-10-15", "league": "NHL", "odds": "spreads", ...

javascriptjsonnode.js

When $routeChangeStart is triggered, the location fails to locate the corresponding template

In my web application, I have an app variable associated with the module myApp. There are 3 pages: /login, /registration, and /. The behavior of $routeChangeStart is defined as follows: First, it checks if a global variable user is defined. If yes, it mo ...

javascriptangularjsangularjs-routing

What is the best way to toggle dropdown menu items using jQuery?

Upon clicking on an li, the dropdown menu associated with it slides down. If another adjacent li is clicked, its drop down menu will slide down while the previous one slides back up. However, if I click on the same li to open and close it, the drop down m ...

javascriptjqueryhtmlcss

Unable to add key/value pair to object in Node

While using Node, I encountered a strange issue where I was unable to attach the key/value pair broadcastStamp = date to the object "result." Despite confirming that it is indeed an object with typeof, no errors were thrown - the key/value simply did not a ...

javascriptnode.js

What causes my input field to lose focus in React.js after typing just one character?

My react.js component is experiencing an issue where the input field loses focus whenever a character is typed. To continue typing or editing, I have to click on the input field again. What could be causing this problem? Below is the code snippet in quest ...

javascriptreactjsdom-events

Unable to prevent ordered lists from overlapping with other content I attempt to place beneath them in HTML

function filterImages() { let input = document.getElementById('searchbar').value; input = input.toLowerCase(); let images = document.getElementsByClassName('gallery'); for (let i = 0; i < images.length; i++) { ...

javascripthtmlcsshtml-lists

When downloading text using Angular, the file may not display new line characters correctly when opened in Notepad

When downloading text data as a .txt file in my Angular application using JavaScript code, I encountered an issue. Below is the code snippet: function download_text_as_file(data: string) { var element = document.createElement('a') eleme ...

javascriptangularutf-8utf-16utf

Backbone.js encountered an illegal invocation

http://jsfiddle.net/herrturtur/ExWFH/ If you want to give this a try, follow these steps: Click the plus button. Double click on the newly created name field. Enter information into the fields. Press Enter. The era fields (from and until) will be disp ...

javascriptbackbone.jslocal-storage

Even with the use of setTimeout, Angular 5 fails to recognize changes during a lengthy operation

Currently, I am facing an issue with displaying a ngx-bootstrap progress bar while my application is loading data from a csv file. The Challenge: The user interface becomes unresponsive until the entire operation is completed To address this problem, I a ...

javascriptangulartypescriptsettimeoutangular-changedetection

After an error occurs, the Node.js Restify code will be executed

Within a Restify route, I have set up a router handler that calls a custom module for error checking. If the code encounters an error condition, it returns next(err) and displays the error message in the browser. However, the code does not stop executing a ...

javascriptnode.jsexpressrestify

Update individual component based on selected value

I am working on a blogs page that consists of two main components: filter and card <template> <div> <div v-if='$apollo.loading'>Fetching data...</div> <div v-else> <FilterComponent :categorie ...

javascriptvue.jsgraphqlnuxt.js