v-model not working with bootstrap datepicker

Question

Scenario

I'm changing a themes default and super ugly datepicker and decided to use bootstraps datepicker, found here. The problem im having is that my 'v-model' attribute isnt doing anything when i use the datepicker, but its doing something when i type in the input field.

Code

// Html
<div class="position-relative has-icon-left">
    <input v-model="user.date_of_birth" placeholder="dd/mm/yyyy" id="date-of-birth" class="form-control datepicker" name="date">
    @{{ user.date_of_birth }}
</div>

// javascript
$('.datepicker').datepicker({
    format: 'dd/mm/yyyy',
    setDate: new Date()
});

the datepicker works and is initialised and it changes the value on the input field. My problem is that v-model is completely ignored unless i physically type in the field!

Question

How do i get v-model to work with this datepicker? Is there a specific reason that v-model isn't working with this datepicker?

Answer 1

you can use v-model like this：

<div id="app">
    <my-date-picker v-model="date"></my-date-picker>
    {{date}}
</div>


Vue.component('my-date-picker',{
    template: '<input type="text" v-datepicker class="datepicker" :value="value" @input="update($event.target.value)">',
    directives: {
        datepicker: {
            inserted (el, binding, vNode) {
                $(el).datepicker({
                    autoclose: true,
                    format: 'yyyy-mm-dd'
                }).on('changeDate',function(e){
                    vNode.context.$emit('input', e.format(0))
                })
            }
        }
    },
    props: ['value'],
    methods: {
        update (v){
            this.$emit('input', v)
        }
    }
})


var app = new Vue({
    el: '#app',
    data: {
        date: '2018-03-01'
    }
})

Answer 2

I failed with jacky's answer, but thanks to https://github.com/Xelia, problem sovled (even in Vue 1.0, using ready life cycle instead of mounted)

Manually update vue data in datepicker changeDate event listener, like this

var app = new Vue({
  el: '#app',
  data: {
    startDate: '',
  },
  mounted() {
    $("#startDate").datepicker().on(
      "changeDate", () => {this.startDate = $('#startDate').val()}
    );
  },
})

https://jsfiddle.net/3a2055ub/

And by the way, if you are working on legacy company project using ES5 function instead of ES6 fat arrow function. Need to bind this, which is vue instance, into the function. For example:

mounted() {
  var self = this; // the vue instance
  $("#startDate").datepicker().on(
    "changeDate", function() {self.startDate = $('#startDate').val()}
  );
},

Of course there are other ways to reach this goal, as this blog written by Jason Arnold shows.

Reference: https://github.com/vuejs/vue/issues/4231

Probable related question: V-model with datepicker input