Vue: How to make v-model synced while jQuery UI changing values?

[danielchou]

Hi,
Sorry, I have posted the same question on Discussion repeatedly, thought maybe no one see this.

I have a form with date input bind with v-model and build with jQuery UI datepicker. So far I can get this value and pass through the model, please see example, however, I do not prefer the way directly pass value. I see Vue 0.11.6 now supporting the jQuery event, could someone have a better way to handle this?

[yyx990803]

Here's an example wrapping it inside a custom directive: http://jsbin.com/yorosaneko/1/edit?html,js,console,output

[danielchou]

@yyx990803 Evan, thank you very much! :100:

I wish vue will have more examples, so that people could see its beauty and simplicity.

[swift1]

Nice solution and and epic example on using custom directives! However, onSelect should probably be replaced with onClose, because when you use onSelect, the date value will only be updated when you click on a date, and not when you type in a date manually and then tab out of the input field.

Vue.directive('datepicker', {
  bind: function () {
    var vm = this.vm;
    var key = this.expression;
    $(this.el).datepicker({
      dateFormat: 'dd.mm.yy',
      onClose: function (date) {
        if (date.match(/^(0?[1-9]|[12][0-9]|3[01])[\/\-\.](0?[1-9]|1[012])[\/\-\.]\d{4}$/))
          vm.$set(key, date);
        else {
          vm.$set(key, "");
          console.log('invalid date');
        }
      }
    });
  },
  update: function (val) {
    $(this.el).datepicker('setDate', val);
  }
});

var v =new Vue({
    el:"#main",
    data:{
        dt: '29.04.2015'
    },
    methods:{
        CheckDate:function(){
            console.log(this.dt);
        }
    }
});

[swift1]

Another truly epic thing is that the date picker directive can be encapsulated inside a component, like this:

Vue.component('custom-component', {

    directives: {
        datepicker: {
            ....
        }
    },  
    ....
});

Gotta love Vue.js :smile:

[adelineu]

AWESOME! :+1:

[maxKimoby]

Thank you so much! Another great feature developed by Vue team.

[patriziotomato]

Be careful using bootstrap-datepicker with this attempt. Using their changeDate event will lead to an endless loop! Could not figure out how to resolve that so I need to change to jquery's datepicker implementation.

[LKaemmerling]

@yyx990803 how is that possible in vuejs ? I've tried with the sample above and got the Datepicker displayed... but it doesn't set the data in the underlying model

Edit: Ok i got it:

directives: {
        'datepicker': {
            bind: function (el,binding,vnode) {
                console.log('succeess');
                $(el).datetimepicker({
                    timeFormat: "HH:mm:ss",
                    dateFormat:'yy-mm-dd',
                    onSelect: function (date) {
                        Vue.set(this, binding.expression, date);
                    }
                });
            },
            update: function (el,binding) {
                $(el).datetimepicker('setDate', binding.value);
            }
        }

Edit2: Okay i don't get it.. it doesn't update die model...

[LinusBorg]

Thank your for your interest in this project.

However, your issue is a usage/support question, and the issue tracker is reserved exclusively for bug reports and feature requests (as outlined in our Contributing Guide).

We encourage you to ask it on the forum , Stack Overflow or on gitter and are happy to help you out there.