Glyphicons from Bootstrap 3.1.1 break datetimepicker

[sergeny]

I am trying to make this basic example work properly:

<div class="input-append date form_datetime">
<input size="16" type="text" value="" readonly>
<span class="add-on"><i class="icon-th"></i></span>
</div>

<script type="text/javascript">
$(".form_datetime").datetimepicker({
format: "dd MM yyyy - hh:ii"
});
</script> 

Of course, Bootstrap 3 does not have icon-th, so nothing is displayed. I tried changing icon-th to glyphicon-th or "glyphicon glyphicon-th". What then happens is that the datetimepicker opens and never closes, and does not allow you to pick anything.

This can be changed by taking bootstrap-datetimepicker.min.js and doing sed 's/add-on .icon-th/add-on .glyphicon-th/g'. That is, change every .add-on .icon-th to .add-on .glyphicon-th. Unfortunately, the icon still looks weird, and it is positioned on the next line, not on the same line (unnecessary linebreak).

[thexodus]

You are still missing some basics of bootstrap 3.0. I wonder if you have included bootstrap datetimepicker css since you haven't mentioned about it.

Do use below html code, include both js and css file of bootstrap datetimepicker along with bootstrap js and run your script.

<div class="input-group date form_datetime col-md-5">
  <input size="16" type="text" value="" readonly class="form-control">
  <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
</div>

[Yustie]

There are no icons anymore starting with icon in bootstrap 3. only in 2.

[smalot]

icons has been rollbacked to glyphicon ...

[viroff]

just use div ex: <div class="glyphicon glyphicon-chevron-left"></div>