Bootstrap日期选择器CSS样式无法生效

Question

我正在尝试使用日期选择器网站的日期选择器，但CSS并没有按照应有的效果起作用。

这是我的输出和我想让它看起来的样子：

这里是一个 jsFiddle 连接 和相关代码：

<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被覆盖以更改日期选择器的显示。

- Jared

---

你的 jsfiddle 中的日期选择器对我完全无效。 - Tim McClure

不难检查实时HTML并查看任何元素应用了哪些规则以及计算出的样式是什么。这就是这里的任何人都会做的事情。演示资源未正确加载，因此如果没有工作演示，其他人很难提供帮助。 - charlietfl

Answer 1

Bootstrap 3版本中的类与Bootstrap 2版本中有所不同。

文档中的日期范围标记已经过时，仅适用于Bootstrap 2：date range markup in the docs

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

但是如果你去查看带有输入范围的在线演示，你将会看到正确的标记：

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

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

我会把添加按钮的任务留给读者自己完成，但是可以查看Bootstrap中如何样式化输入组按钮。请参考这里。

- KyleMit

---

谢谢 - 正是从Bootstrap 2到3的转换引起的错误。这个修复了它。 - Jared

这个“joined”日期选择器能否被标记？那是否被视为插件，因为我们已经在中间的“to”中使用了它。 - Jared