Bootstrap-datepicker: Fix compatibility issue with the final version of Bootstrap v4

Created on 25 Jan 2018  路  3Comments  路  Source: uxsolutions/bootstrap-datepicker

Since they released bootstrap V4 beta 3, they changed the way we add "add-ons" on the input fields. Now we have two new classes: "prepend" and "append". Because of this, the datepicker is no longer working in some cases (for example, when I want to use an icon to open the calendar)... I don't have time to do all the process to make a pull request (create a branch, test and etc), but I fixed it myself with just a small change in the code. Here it goes (It's working):

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

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

Hope this helps.

All 3 comments

If you just keep both classes it works.

Yes, this works fine

<div class="input-group date">
  <input type="text" class="form-control">
  <div class="input-group-append input-group-addon">
    <span class="input-group-text"><i class="fa fa-calendar-check-o" aria-hidden="true"></i></span>
  </div>
</div>

Yes I did this thank you! However, my company wants an officially supported release ...

Was this page helpful?
0 / 5 - 0 ratings