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

Posted 2023-02-23

【中文标题】在 Vuejs 2 中使用 bootstrap-datetime 选择器

【英文标题】：Using bootstrap-datetime picker with Vuejs 2

【发布时间】：2017-10-30 13:27:18

【问题描述】：

我想将日期时间选择器与 vue 2 或 webpack 集成。我尝试搜索但找不到相关文章。有没有人将日期时间选择器与 Vue2 或 webpack 集成，是否有任何示例代码可供参考？任何帮助将不胜感激。

谢谢。

【问题讨论】：

这是我的工作代码bootstrap datetimepicker with vue.js within a component, without having to make a new component

【参考方案1】：

您肯定可以通过谷歌搜索vuejs bootstrap datetimepicker 找到有关该主题的一些问题，但老实说，我不确定 VueJS 是否适合与 Bootstrap 一起使用，它已经有自己的 (jQuery) 逻辑。

有 VueStrap 项目，但它适用于 Vue1，请参阅他们的 datepicker。 This fork 应该支持 Vue2，但我不能保证它的质量。但是，如果您想自己集成日期选择器，它可以为您提供一些灵感，请参阅datepicker code。

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

Bulma date(time)picker from vue-bulma → Demo

Element datetimepicker → Github of the project

【参考方案2】：

这里我将使用来自bootstrap's 3 example 的代码。您必须为日期选择器创建一个组件：

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>

【讨论】：

我试过你的代码，现在它告诉我 $(".datetime").datetimepicker() 不是函数而是函数。你能建议我如何导入 datetimepicker，因为我是 Vue 2 的新手

您必须在代码中的某处导入引导程序的 js，例如在您的 index/main .js 中或作为 index.html 中的 CDN。这与 webpack 的细节更相关。

上面的代码似乎改变了日期而不是模型值