Allow Vue to handle the registration of the datepicker event

Question

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/

javascript uikit vue.js vuejs2

Answer 1

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

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 3

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.
});

Answer 4

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.
});

Allow Vue to handle the registration of the datepicker event

Answer №1

Answer №2

Similar questions

Restricting the number of times a user can click on

What is the best way to create navbar items using vue-router links that will toggle the visibility of the navbar?

Is it possible to create a compound editor within a cell in SlickGrid that contains two date fields

Utilizing jQuery Mobile - Dividing content across multiple HTML files

Displaying results of data from a cross domain request

Adjust the cell text overflow based on the width of the table

Analyzing the functionality of Express with Mocha and Chai

Enhance Your Form Validation with jQuery UI Dialog Plugin

Choosing a specific page number - kendo grid

Button in HTML not functioning as expected

The VueJS component fails to load on the webpage

jQuery seems to have difficulty selecting the text of a hyperlink's element using the text() or html() methods

Django will not be replacing the outdated image

When a new ajax function is added, the original Ajax code stops functioning

Differences between Vue.js Composition API and Options API - utilizing posts ref within a v-for iteration

What is the best way to track upload progress while using Django?

Adjusting the rotation transform by deleting and reapplying canvas is causing the chart to not display data after redrawing

What could be causing the redirection to my php file in this particular contact form?

Error: The call stack has reached its maximum size while running an npm install

Using jQuery to create dynamic elements that fade out with timers