Bootstrap DatePicker CSS样式不起作用

Posted 2023-05-07

【中文标题】Bootstrap DatePicker CSS样式不起作用

【英文标题】：Bootstrap DatePicker CSS Styling not Working

【发布时间】：2015-07-14 07:14:00

【问题描述】：

我正在尝试使用来自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 的哪一部分被覆盖以更改日期选择器的显示。

【问题讨论】：

你的 jsfiddle 中的日期选择器根本不适合我......

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

【参考方案1】：

类从 Bootstrap 2 更改为 Bootstrap 3

date range markup in the docs 对于引导程序 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>

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

【讨论】：

谢谢 - 这正是从 Bootstrap 2 到 3 的错误。这修复了它。

是否可以标记这个“加入”的日期选择器？那会不会被认为是一个插件，所以我们已经将它用于中间的“to”。