vue.js - 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'
    }
})