Bootstrap DatePicker CSS Styling not Working

Profile picture for Jared
Jared

I am trying to use the datepicker from the datepicker site, but the CSS is not working as it should.

Here is my output and what I want it to look like:

What I want it to look like vs What it actually looks like

Here's a jsFiddle here and the relevant code:

<!-- language: lang-html --> 
<div class="input-daterange">
  <input type="text" class="input" value="2012-04-05" />
  <span class="add-on">to</span>
  <input type="text" class="input" value="2012-04-19" />
  <button type="submit" class="btn btn-default" id='submit'>Submit</button>
</div>

But I can't tell what part of the css is being overridden to change the display of the datepicker.

The classes changed from Bootstrap 2 to Bootstrap 3

The date range markup in the docs is out of date for bootstrap 2:

<div class="input-daterange">
    <input type="text" class="input-small" />
    <span class="add-on">to</span>
    <input type="text" class="input-small" />
</div>

But if you go to the online demo with input ranges, you can see the correct markup:

<div class="input-daterange input-group">
    <input type="text" class="input-sm form-control" />
    <span class="input-group-addon">to</span>
    <input type="text" class="input-sm form-control" />
</div>

Demo in Stack Snippets

<!-- begin snippet: js hide: false --> <!-- language: lang-html --> 
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/css/datepicker.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/js/bootstrap-datepicker.js"></script>


<div class="input-daterange input-group" id="datepicker">
  <input type="text" class="input-sm form-control" name="start" />
  <span class="input-group-addon">to</span>
  <input type="text" class="input-sm form-control" name="end" />
</div>
<!-- end snippet -->

I'll leave adding a button as an exercise for the reader, but check out how to style input group buttons in Bootstrap