Twitter's Bootstrap Datepicker missing Glyphicons

Question

I'm trying to use datepicker from bootstrap (http://eternicode.github.io/bootstrap-datepicker/) and everything works fine except none of the glyphicons are showing up.

I saw that glyphicons are moved to another directory under bootstrap 3 (http://glyphicons.getbootstrap.com/) which is what I'm using, but I wasn't sure how I can integrate it.

Both

<input type="text" value="12-02-2012" date-date-format="yyyy-mm-dd" class="datepicker">

And

<div class="input-append date datepicker" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
     <input class="span2" size="16" type="text" value="12-02-2012" readonly/>
     <span class="add-on"><i class="icon-th"></i></span>
</div>

Didn't work.

Anyone knows how I can integrate bootstrap 3 with the twitter datepicker?

Answer 1

Download the plugin's source code Javascript and CSS (or less) and replace old class references to new, see: http://www.bootply.com/bootstrap-3-migration-guide. B.e. as mentioned by PilHA replace icon-* with glyphicon glyphicon-*, input-append with input-group etc.

Do the same for your HTML code. Or use a migrator/updater like: http://twitterbootstrapmigrator.w3masters.nl/, http://bootstrap3.kissr.com/ or http://code.divshot.com/bootstrap3_upgrader/

Install Glyphicons from http://glyphicons.getbootstrap.com/: download the files and copy over all the font files to a /fonts directory near your CSS. Include the compiled CSS file from the /css in the repository to your local css folder or download the Less file and compile it with your Bootstrap files.

update Glyphicons are back since RC2. Twitter's Bootstrap 3 includes 180 glyphs in font format from the Glyphicon Halflings set.

Answer 2

In addition to changing the class references, I found there to be some layout considerations disallowing a one-to-one swapping of certain classes, such as span2 on the input control. I ended up with the following:

<div class="form-group row">
  <div class="col-xs-8">
    <label class="control-label">My Label</label>
    <div class="input-group date" id="dp3" data-date="12-02-2012" data-date-format="mm-dd-yyyy">
      <input class="form-control" type="text" readonly="" value="12-02-2012">
      <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
    </div>
  </div>
</div>

CSS changes in datepicker.css on lines 176-177:

.input-group.date .input-group-addon i,
.input-group.date .input-group-addon i {

Javascript change in datepicker-bootstrap.js on line 34:

this.component = this.element.is('.date') ? this.element.find('.input-group-addon') : false;

I also wrote up a blog post going into more detail here: http://kenyontechnology.com/2013/10/08/datepicker-for-bootstrap-with-twitter-bootstrap-3-0/

Answer 3

download bootstrap3 from here Download

Now unzip it and get font from font folder .

Copy this .ttf , .otf ,.svg and other file and paste @ your project root

And You can download glyphoicon.css from here glypho.css

include this css file in index file

Thats done

Answer 4

I wasn't able to change my glyphicons initially and in the F12 dev tools I could see an error trying to load the "glyphicons-halflings-regular.woff2". I was able to fix it by downloading the .woff2 file and adding it to my fonts folder. Then I was able to change to what I wanted. https://github.com/twbs/bootstrap/blob/master/fonts/glyphicons-halflings-regular.woff2