使用带有Vuejs 2的bootstrap-datetime选择器

Question

我想将Datetime选择器与vue 2或webpack集成。 我试过搜索但找不到相关的文章。 有没有人将Datetime选择器与Vue2或webpack集成，是否有可供参考的示例代码？ 任何帮助将受到高度赞赏。

谢谢。

Answer 1

你可以通过Googling vuejs bootstrap datetimepicker找到关于这个问题的一些问题，但说实话，我不确定VueJS是否适合使用Bootstrap，它已经拥有自己的（jQuery）逻辑。

有VueStrap项目，但它适用于Vue1，请参阅他们的日期选择器 。 这个分支应该支持Vue2，但我不能确保它的质量。 但是，如果您想自己动手，它可以为您提供有关如何集成日期选择器的一些灵感，请参阅datepicker代码 。

如果您不介意使用其他日期选择器，我会建议其他一些非常简单的集成到您的项目：

• 从vue-bulma → Demo的 布尔玛日期（时间）选择器

• 元素datetimepicker → 项目的Github

Answer 2

在这里，我将使用bootstrap的3个示例中的代码。 您必须为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>