Bootstrap 3.0.0 breaks datepicker icon

Question

Here is a demo

If you are using 2.3.1, uncomment line 12 and you will see the correct button

Does anyone know how I can fix it for version 3.0.0-rc1?

Answer 1

UPADTE

Below is the answer below for Bootstrap 3 release candidates, however the stable version includes the Glyphicons library, which requires a base class and a separate icon class, for example:

<span class="glyphicon glyphicon-calendar"></span> 

Original answer:

From the docs:

With the launch of Bootstrap 3, the icons have been moved to separate storage. This keeps the main project as fast as possible, makes it easier for people to swap icons, and also the more convenient Glyphicons fonts available to more people outside Bootstrap.

This means that you need to separately enable glyphics, you can use your own Bootstrap icons or another library, for example, Awesome Font

Answer 2

To fix the icon problem in bootstrap-datepicker for bootstrap 3.0, follow these steps:

//../bootstrap-datepicker.js

Find the following content and replace

replace <i class="icon-arrow-left"/>

with <i class="glyphicon glyphicon-arrow-left"/>

replace <i class="icon-arrow-right"/>

with <i class="glyphicon glyphicon-arrow-right"/>

replace .toggleClass('icon-arrow-left icon-arrow-right');

c .toggleClass('glyphicon-arrow-left glyphicon-arrow-right');

All hopefully this will work for you.

Answer 3

It seems that .icon-calendar does not exist in 3.0.0-rc1.

2.3.1 css

3.0.0-rc1 css

The only icons mentioned in 3.0.0-rc1 CSS seem to be related to navigation. It also looks like they renamed it to .glyphicon-calendar .

Answer 4

So, instead, I prefer to add another to work with Bootstrap V2 and V3.

 <tr>'+ '<th class="prev">'+ '<i class="icon-arrow-left"/>'+ '<i class="glyphicon glyphicon-arrow-left"/>'+ //Añadido para solucionar el bug con BS3 '</th>'+ '<th colspan="5" class="switch"></th>'+ '<th class="next">'+ '<i class="icon-arrow-right"/>'+ '<i class="glyphicon glyphicon-arrow-right"/>'+ //Añadido para solucionar el bug con BS3 '</th>'+ '</tr>'+ 

Answer 5

find below line in bootstrap-datetimepicker.js

 this.fontAwesome = j.fontAwesome || this.element.data("font-awesome") || false; 

Replace it

 this.fontAwesome = j.fontAwesome || this.element.data("font-awesome") || true; 

Answer 6

I think the best way:

 <script type="text/javascript"> $(document).ready(function(){ $('#ge_eventbundle_event_eventDate').datetimepicker({ language: "fr", format: "yyyy-mm-dd hh:ii", autoclose: true, todayBtn: true, fontAwesome: 'font-awesome', }); }); </script>