Datepicker on Boostrap 4.0.0 Broken

[rickychilcott]

I'm not seeing any reasons why this is happening in the 4.0.0 migration guide

I saw #226 and have the latest version (1.7.3)

Any thoughts?

[atatanasov]

gijgo datepicker 1.7.3 works only with bootstrap 4.0.0-beta.3. If you want to gijgo datepicker with older bootstrap 4 version you need to downgrade to older version of our library. This is caused by the new input-group-append class added in bootstrap 4.0.0-beta.3. That class doesn't exists in older bootstrap 4 versions.

[rickychilcott]

Thank you for looking into this @atatanasov. When I rolled back to v1.7.2, I not seeing all the styling I'd expect either:

To be clear, Bootstrap 4.0.0 was released just a few days ago -- https://blog.getbootstrap.com/2018/01/18/bootstrap-4/ After reading through that blog post, it looks like while beta3 was supposed to have fixed the input-group styling but there may have been some changes in 4.0.0 that caused a problem. Is that possible?

See twbs/bootstrap#25110

[rickychilcott]

From https://getbootstrap.com/docs/4.0/components/input-group/ input groups should be:

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
  <div class="input-group-append">
    <span class="input-group-text" id="basic-addon2">@example.com</span>
  </div>
</div>

Reading throught the JS, it looks like https://github.com/atatanasov/gijgo/blob/master/src/datepicker/js/datepicker.base.js#L500 will need to change from:

<span class="input-group-append"><span class="input-group-text">' + data.icons.rightIcon + </span></span>

to

<div class="input-group-append"><span class="input-group-text">' + data.icons.rightIcon + </span></div>

And then https://github.com/atatanasov/gijgo/blob/master/dist/combined/css/gijgo.css#L313-L314 will need to be modified to work with the new design. Commenting out those lines allows it to look correct in Boostrap 4.0.0, but the icon size is quite small.

Hope this helps a bit. Thank you for building this great datepicker that was easy drop in replacement from Bootstrap V3 options that were out there!

[atatanasov]

We fixed that in the new development version. Please use the latest dev build from https://github.com/atatanasov/gijgo/tree/master/dist

We are going to release an official version pretty soon.

[rickychilcott]

Great! Thanks, looks much better, I appreciate your work.

I do notice that it might be off by one pixel with this new latest:

When I add the following:

.gj-datepicker-bootstrap span[role="right-icon"] .input-group-text {
  padding: 7px 8px 7px 30px;
}

It looks like:

I'm able to tweak that myself, so I'm ok for now, but I thought I share.