Using bootstrap-datetime picker with Vuejs 2

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.

Here is my code for a working bootstrap datetimepicker with vue.js within a component, without having to make a new component — Ben
– Ben, Commented Mar 22, 2018 at 15:08

FitzFish · Accepted Answer · 2017-05-30 08:00:13Z

6

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:

answered May 30, 2017 at 8:00

FitzFish

8,6193 gold badges33 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Slim · Accepted Answer · 2017-05-30 08:25:42Z

5

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>

answered May 30, 2017 at 8:25

Slim

1,9641 gold badge12 silver badges20 bronze badges

3 Comments

Amit Sharma Over a year ago

I tried your code, now it showing me $(".datetime").datetimepicker() is not a function a function. Can you suggest me how to import datetimepicker as I am very new to Vue 2

Slim Over a year ago

You have to import the bootstrap's js somewhere in your code for example in your index/main .js or as CDN in index.html. This is more related to webpack specifics.

GotaloveCode Over a year ago

The above code seems to change the date but not the model value

Collectives™ on Stack Overflow

Using bootstrap-datetime picker with Vuejs 2

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related