search

uxsolutions / bootstrap-datepicker

A datepicker for twitter bootstrap (@twbs)
Apache License 2.0
12.66k stars 6.07k forks source link

BS4.0.0 class names changed and bootstrap-datepicker no longer works. #2348

Open ghost opened 6 years ago

ghost commented 6 years ago

Expected behaviour

Click on the input group calendar addon or input field and be able to select a date

Actual behaviour

Nothing happens BS4.0.0 stable release has changed input-group class names. JS and CSS must be updated in order for it to work.

Datepicker version used

Datepicker for Bootstrap v1.7.0-RC3 (https://github.com/uxsolutions/bootstrap-datepicker)

Example code

Update to BS4.0.0. try running the datepicker as setup previously.

JAZ-013 commented 6 years ago

I have tried this with v1.7.1 with the same results.

ghost commented 6 years ago

The BS4 class names changed from input-group-addon to input-group-append and input-group-prepend. The secondary class was added named "input-group-text".

So until the JS and CSS are updated, users running BS 4.0.0+ won't be able to use this plugin.

ghost commented 6 years ago

Check https://github.com/uxsolutions/bootstrap-datepicker/issues/2343

JonnoFTW commented 6 years ago

As a workaround, I did the following, simply just put use the input-group-addon class even though it doesn't affect anything:

<div class="input-group date datepicker" data-provide="datepicker">
     <div class="input-group-prepend input-group-addon">
         <span class="input-group-text"><i class="fa fa-calendar"></i></span>
     </div>
     <input id="booking-date" type="text" name="booking-date" class="form-control">
 </div>