Bootstrap DatePicker CSS 样式不起作用

Question

我正在尝试使用 datepicker 网站的日期选择器，但 CSS 没有正常工作。

这是我的输出以及我希望它的样子：

这里有一个jsFiddle here和相关代码：

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

但我无法判断 css 的哪一部分被覆盖以更改日期选择器的显示。

Answer 1

类从Bootstrap2变为Bootstrap3

date range markup in the docs 已过期 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>

但是如果你转到 online demo with input ranges，你可以看到正确的标记：

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

堆栈片段中的演示

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

我将添加一个按钮作为 reader 的练习，但请查看如何设置样式 input group buttons in Bootstrap

Bootstrap DatePicker CSS 样式不起作用

Bootstrap DatePicker CSS Styling not Working

css

jquery

datepicker

twitter-bootstrap

bootstrap-datepicker

堆栈片段中的演示