Bootstrap dropped ".input-group-addon"

[jefvhal]

Expected behaviour

The "to" in between 2 datepickers (range) should be looking nice

Actual behaviour

The "to" in between 2 datepickers (range) is not well-aligned

See https://getbootstrap.com/docs/4.0/migration .input-group-addon is replaced with .input-group-append and .input-group-prepend

Datepicker version used

1.7.1

Example code

Bootstrap 4.0.0 Beta 2: https://jsfiddle.net/9r2ct8x2/ (Looking OK) Bootstrap 4.0.0 Beta 2: https://jsfiddle.net/0e9Ltt21/ (not OK)

[jefvhal]

This is for updating the examples

The <span> should be changed and wrapped in new <div> OLD (Bootstrap 3) <span class="input-group-addon">to</span>

NEW (Bootstrap 4) <div class="input-group-prepend"><span class="input-group-text">to</span></div>

See updated fiddle: https://jsfiddle.net/jefvhal/0e9Ltt21/3/

[bsmaha]

Clicking on the icon located in .input-group-prepend is not triggering datepicker as it did when it was in .input-group-addon

Does anyone have a solution for that?

[xdimension]

@bsmaha I get it working, the html component should be like this:

<div class="input-group date">
    <input class="form-control" ... />
    <div class="input-group-append">
        <span class="input-group-text"><i class="fa fa-calendar"></i></span>
    </div>
</div>

to activate datepicker:

$('.date').datepicker();

It's important that we have to use "date" as the class name of datepicker selector in the input-group div, if we change it to something else then it's messed up.

I'm using v1.9.0, note for version that supports Bootstrap 4 (whichinput-group-addon was changed to input-group-append or input-group-prepend), the code at line 103 or so should have picked up those new classes like this:

this.component = this.element.hasClass('date') ? this.element.find('.add-on, .input-group-addon, .input-group-append, .input-group-prepend, .btn') : false;