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

Share Improve this question Follow edited Jun 20, 2020 at 9:12 CommunityBot 111 silver badge asked Nov 4, 2013 at 9:12 vlio20vlio20 9,3151818 gold badges101101 silver badges186186 bronze badges 3

• 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

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

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();
       });