Bootstrap-datepicker: Add 'input-group-append' to catch up with bootstrap 4

[asbayer]

Expected behaviour

Make the datepicker work again by adding ', .input-group-append' to line 118 in the file bootstrap-datepicker.js.
this.component = this.element.hasClass('date') ? this.element.find('.add-on, .input-group-addon, .input-group-append, .btn') : false;

Actual behaviour

Datepicker is not working with boostrap 4 input-group when input-group-addon is used.

Datepicker version used

Whatever I got from NuGet this morning. I guess it was called 1.8

[DianaKoenraadt]

For anyone visiting whie it's not incorporated in the .js yet, another workaround is to add the class ".add-on" in your HTML

[wimdeblauwe]

Where exactly do you add this in the HTML ?

[asbayer]

In file boostrap-datepicker.js (v1.8.0) in the defeinition of the Datepicker function (line 101)

    var Datepicker = function(element, options){
        $.data(element, 'datepicker', this);
        this._process_options(options);

        this.dates = new DateArray();
        this.viewDate = this.o.defaultViewDate;
        this.focusDate = null;

        this.element = $(element);
        this.isInput = this.element.is('input');
        this.inputField = this.isInput ? this.element : this.element.find('input');
// here i added it
        this.component = this.element.hasClass('date') ? this.element.find('.add-on, .input-group-addon, .btn, .input-group-append') : false;
        if (this.component && this.component.length === 0)
            this.component = false;
        this.isInline = !this.component && this.element.is('div');

        this.picker = $(DPGlobal.template);

        // Checking templates and inserting
        if (this._check_template(this.o.templates.leftArrow)) {
            this.picker.find('.prev').html(this.o.templates.leftArrow);
        }
....

[DianaKoenraadt]

@wimdeblauwe This is an excerpt of my HTML:

<div class="input-group date">
    <input ...... >
    <div class="input-group-append add-on">
        ......
    </div>
</div>

Basically, instead of adding the class that is missing (input-group-append) to the JavaScript, I add one that it does know to my HTML

[asbayer]

Ok... I will use the class add-on.
Thank you.

[wimdeblauwe]

Does not seem to work for me using Bootstrap 4. What "version" of the CSS are you using?

[asbayer]

I use XHTML5 in a .Net4.5.1 MVC application. I guess this is CSS3.