在Vuejs 2中使用bootstrap-datetime选取器

Question

我想把Datetime picker和vue 2或webpack集成起来。我试着搜索，但找不到相关的文章。有没有人把Datetime选取器和Vue2或webpack集成在一起，有没有可供参考的示例代码？任何帮助都将不胜感激。

谢谢。

Answer 1

你当然可以通过谷歌vuejs bootstrap datetimepicker找到一些问题，但老实说，我不确定VueJS是否适合使用Bootstrap，因为它已经有了自己的(jQuery)逻辑。

有一个VueStrap项目，但是它可以和Vue1一起工作，请看他们的datepicker。This fork应该支持Vue2，但我不能保证它的质量。但是，如果您想自己集成datepicker，它可以给您一些关于如何集成datepicker的灵感，请参阅datepicker code。

如果你不介意使用另一个datepicker，我会建议一些其他的可以集成到你的项目中的小工具：

• Bulma date(time)picker from vue-bulma Demo
• Element datetimepicker Github of the project

→→

Answer 2

这里我将使用bootstrap's 3 example中的代码。您必须为datepicker创建一个组件：

Vue.component('datetimepicker', {
    template: `
            <div class='input-group date' ref="datetimepicker">
                <input type='text' class="form-control" :value="value" @change="update($event)" />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
    `,
    props: ['value'],
    methods: {
        update(event){

            this.$emit('input', event.target.value);
        }
    },
    mounted(){
        $(this.$refs.datetimepicker).datetimepicker()
    }
});

现在你可以像这样使用这个组件：

<datetimepicker v-model="myDate"></datetimepicker>