Bootstrap 4 variant - Githubissues

This is so awesome that you are working on! :) For my project I used https://tempusdominus.github.io/bootstrap-4/, and followed what you did for the bootstrap 3 version, and got it running on bootstrap 4!

I'll provide you some of the differences I noted from my experiments in the hopes that it might ease some of your efforts! :)

I registered the html like this;

<div class="input-group date" id="datetimepicker1" data-target-input="nearest" data-target="#datetimepicker1" data-toggle="datetimepicker">
    <input v-model="planned_datetime" id="date-input-field" type="text" class="form-control datetimepicker-input" data-target="#datetimepicker1"/>
    <div class="input-group-append" data-target="#datetimepicker1">
        <div class="input-group-text"><i class="fa fa-calendar"></i></div>
    </div>
</div>

Then in my script; Imports

import 'tempusdominus-bootstrap-4/build/css/tempusdominus-bootstrap-4.min.css';
require('tempusdominus-bootstrap-4');

Data

planned_datetime: "",
dp: null

Methods

onChange(event) {
                this.planned_datetime = event.date ? event.date.format(this.dp.format()) : 
}

Mounted

            if (this.dp) return;
            // Handle wrapped input
            this.elem = $('#datetimepicker1');
            // Init date-picker
            this.elem.datetimepicker(this.config);
            this.dp = this.elem.data('datetimepicker');
            // Set initial value
            this.dp.date(new Date());
            // Watch for changes
            this.elem.on('change.datetimepicker', this.onChange);

So I dont know if this is of any help to you, but one thing I noticed was that I had to change the line

this.dp = this.elem.data('DateTimePicker');

to look for 'datetimepicker' in the data instead of 'DateTimePicker'.

Again, thank you very much for the awesome work, and your willingness to help. I greatly appreciate it 😃

ankurk91 / vue-bootstrap-datetimepicker

Bootstrap 4 variant #33