CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrapdatepicker
vlio20
vlio20

Reputation: 9295

How to setup bootstrap-datepicker

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.

Upvotes: 0

Views: 18590

Answers (3)

totymedli
totymedli

Reputation: 31078

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 completely remove that part.

Upvotes: 2

Sridhar R
Sridhar R

Reputation: 20418

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

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

OR

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

Upvotes: 0

Praveen
Praveen

Reputation: 56509

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

Upvotes: 0

Related Questions