CODEWITHSUNDEEP
webpackvue.jsvuejs2datetimepickervue-component
Amit Sharma
Amit Sharma

Reputation: 2477

Using bootstrap-datetime picker with Vuejs 2

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.

Upvotes: 2

Views: 5891

Answers (2)

Slim
Slim

Reputation: 1964

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>

Upvotes: 5

FitzFish
FitzFish

Reputation: 8629

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:

Upvotes: 6

Related Questions