v模型无法与引导日期选择器一起使用 [英] v-model not working with bootstrap datepicker

问题描述

场景

我正在更改主题默认值和超级丑陋的日期选择器，并决定使用引导日期选择器，发现此处。我遇到的问题是，当我使用datepicker时，我的'v-model'属性没有执行任何操作，但是当我在输入字段中键入时却执行了某些操作。

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.

代码

// 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()
});

日期选择器起作用并被初始化，并且它更改输入字段上的值。我的问题是，除非我亲自在字段中键入，否则v-model将被完全忽略！

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!

问题

我如何使v-model与此日期选择器一起使用？
是否有特定原因导致v模型无法与此日期选择器配合使用？

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?

推荐答案

您可以使用v像这样的模型：

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

这篇关于v模型无法与引导日期选择器一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！