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

Question

I wanted to integrate Datetime picker with vue 2 or webpack. I tried searching but couldn't find related article. Have anyone integrated the Datetime picker with Vue2 or webpack, is there any sample code available for reference? Any help would be highly appreciated.

Thanks.

Answer 1

You can sure find some issues on the subject by just Googling vuejs bootstrap datetimepicker , but honestly I'm not sure VueJS is well tailored to work with Bootstrap, that already have its own (jQuery) logic.

There is the VueStrap project, but it works with Vue1, see their datepicker . This fork is supposed to support Vue2, but I can't ensure its quality. However it could gives you some inspiration about how to integrate your datepicker if you want to do it yourself, see the datepicker code .

If you don't mind using another datepicker, I would suggest some others that are trivial to integrate to your project:

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

• Element datetimepicker → Github of the project

Answer 2

Here I'll be using the code from bootstrap's 3 example . You have to create a component for the 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()
    }
});

And now you can use this component like this:

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