I am trying to use the bootstrap-datepicker. The problem is that I am getting only the input filed without no styles. Here are my includes:

<link href="../css/bootstrap.css" rel="stylesheet" media="screen">
<link href="../css/datepicker.css" rel="stylesheet">
<link href="../css/main.css" rel="stylesheet">

<script src="../js/jquery.js"></script>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
        <script src="../js/assets/html5shiv.js"></script>
        <script src="../js/assets/respond.min.js"></script>
<![endif]-->
<script src="../js/bootstrap.min.js"></script>
<script src="../js/assets/bootstrap-datepicker.js"></script>
<script src="../js/main.js"></script>

here is the html:

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

and here is the javascript :

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

what is wrong??

Note: No when I focus into the input the calender appears but there is no icon.

I am trying to use the bootstrap-datepicker. The problem is that I am getting only the input filed without no styles. Here are my includes:

<link href="../css/bootstrap.css" rel="stylesheet" media="screen">
<link href="../css/datepicker.css" rel="stylesheet">
<link href="../css/main.css" rel="stylesheet">

<script src="../js/jquery.js"></script>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
        <script src="../js/assets/html5shiv.js"></script>
        <script src="../js/assets/respond.min.js"></script>
<![endif]-->
<script src="../js/bootstrap.min.js"></script>
<script src="../js/assets/bootstrap-datepicker.js"></script>
<script src="../js/main.js"></script>

here is the html:

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

and here is the javascript :

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

what is wrong??

Note: No when I focus into the input the calender appears but there is no icon.

• javascript
• jquery
• css
• twitter-bootstrap
• datepicker

• yes, copy paste error. fixed question. – vlio20 Commented Nov 4, 2013 at 9:19
• nope, no error. I am totally lost... – vlio20 Commented Nov 4, 2013 at 9:26
• let us continue this discussion in chat – vlio20 Commented Nov 4, 2013 at 9:28

3 Answers 3

If you use this version than you have to use it with Bootstrap 2 because it doesn't fully support Bootstrap 3. If you use Bootstrap 3 you have to deal with the icon problem yourself, by adding a different icon, use a button instead or pletely remove that part.

From your code, it seems you're missing to add the following css files.

1. bootstrap css
2. bootstrap datepicker css

Make sure, you add it.

See here the working JSFiddle

To solve this, either make this call when DOM is loaded:

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

OR

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