Let Vue register datepicker event

Asked By: Anonymous

How can i let Vue know that the datepicker changed the date?

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

  },
  methods: {

  }
})

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 chage the input field by hand Vue gets it, but not after triggering the picker.

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

Solution

Answered By: Anonymous

The quickest way to do this would be to add a handler for the hide event from the datepicker in your Vue.

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

Here is your fiddle updated to do that.

However, traditionally, you should wrap jQuery interaction in a wrapper component.

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

And your template would become

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

And here is your fiddle updated to work with that.