Bootstrap DatePicker CSS Styling not Working

Question

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:

<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 datepicker in your jsfiddle isn't working for me at all... — Tim McClure
– Tim McClure, Commented May 4, 2015 at 19:04
Not hard to inspect the live html and see exactly what rules apply to any element and what the computed style is. That's all anyone here would do. Resources for demo aren't loading properly so without working demo is hard for anyone else to help — charlietfl
– charlietfl, Commented May 4, 2015 at 19:11

KyleMit · Accepted Answer · 2015-05-04 19:37:43Z

2

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

<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>

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

edited May 4, 2015 at 19:37

answered May 4, 2015 at 19:13

KyleMit♦

31.4k74 gold badges517 silver badges712 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jared Over a year ago

Thanks - it was exactly the error going from Bootstrap 2 to 3. This fixed it.

Jared Over a year ago

Is it possible to label this 'joined' date picker? Would that be considered an addon, so we already used it for the middle 'to'.

Collectives™ on Stack Overflow

Bootstrap DatePicker CSS Styling not Working

1 Answer 1

Demo in Stack Snippets

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Demo in Stack Snippets

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related