CODEWITHSUNDEEP
twitter-bootstrapdatepicker
Jackson Tale
Jackson Tale

Reputation: 25842

Why my bootstrap-datepicker does not have icon-calendar?

I am trying to use bootstrap-datepicker.

I have included the datepicker.css and bootstrap-datepicker.js like this:

<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/datepicker.css">
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-datepicker.js"></script>

Then in my div, I did like this:

<div class="input-append date" id="dp2" data-date="15-07-2013" data-date-format="dd-mm-yyyy">
   <input class="span2" size="16" type="text" value="15-07-2013" readonly>
   <label class="add-on"><i class="icon-calendar"></i></label>
</div>

Then at last, I did like this:

<script>

    $(function(){

      $('#dp2').datepicker();

      });
</script>

I can see the date picker, but without the icon.

enter image description here

I wish to have like:

enter image description here

What I did wrong?

Edit

My full code:

<!doctype html>
<html>
  <head>
    <title>Date</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
    <link rel="stylesheet" href="themes/readable/bootstrap.css">
    <link rel="stylesheet" href="css/datepicker.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/bootstrap-datepicker.js"></script>
  </head>

  <body>
    <div class="container">
      <div class="well">
        <h4>Date Picker</h4>
    <div class="input-append date" id="dp2" data-date="15-07-2013" data-date-format="dd-mm-yyyy">
      <input class="span2" size="16" type="text" value="15-07-2013">
      <label class="add-on"><i class="icon-calendar"></i></label>
    </div>
      </div>
    </div>
    <script>

      $(function(){

      $('#dp1').datepicker();
      $('#dp2').datepicker();

      });
    </script>
  </body>
</html>

Upvotes: 7

Views: 49040

Answers (5)

Dhrupit dave
Dhrupit dave

Reputation: 13

HTML:

    <label>Date</label>
<div class="input-append">
    <input class="my-date-picker" id="foo" type="text" />
    <label for="foo" class="add-on"><i class="icon-calendar"></i></label>
</div>

And one line of javaScript to complete your job...

$(".my-date-picker").datepicker();

Upvotes: 0

arn-arn
arn-arn

Reputation: 1377

I had the same experience using the "icon-calendar" so I just used the bootstrap glyphicon which comes with the bootstrap lib and it worked like a charm:

<div class="well">
  <div class="input-append date" id="dp3" 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"><span class="glyphicon glyphicon-calendar"></span>
  </div>
</div>

Upvotes: 0

Jens A. Koch
Jens A. Koch

Reputation: 41776

Because of markup changes for Bootstrap v2 and Bootstrap v3. The sandbox demo helped me to find the correct markup: http://eternicode.github.io/bootstrap-datepicker/

<div class="input-append date">
<input type="text" class="span2">
    /* this next line should help you */
    <span class="add-on"><i class="icon-th"></i></span>
</div>

$('.input-append.date').datepicker({
    format: "mm/yyyy"
});

Upvotes: 0

sunday03
sunday03

Reputation: 21

It works for me by using this: :)

<div class="input-append date" id="theDate" data-date-format="dd-mm-yyyy">
    <form:input path="theDate" class="span2" size="130" readonly="true"/>
    <span class="add-on"><i class="icon-th"><img src="${pageContext.request.contextPath}/....../datepicker.png"/></i></span>
</div>

Hope this will help.... :)

Upvotes: 1

nickhar
nickhar

Reputation: 20853

I've put this JSFiddle together which works using the following HTML:

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

And JS:

$( document ).ready(function() {
    $('#dp3').datepicker();
});

The difference being that id="dp3" is applied to the input tag and not the containing div. However, it seems that in your case it's related to how and where you're referencing your includes.

The JSfiddle above references the base files directly (from both CDN and author sites), so it's likely related to how you are referencing the location (relative or absolute) of the glyphicons/js/css files.

Without a direct link to your implementation or full code, it's hard to diagnose the problem further than this.

Upvotes: 3

Related Questions