我正在尝试使用 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 的哪一部分被覆盖以更改日期选择器的显示。
最佳答案
类从 Bootstrap 2 更改为 Bootstrap 3
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>
我将添加一个按钮作为读者的练习,但请查看如何设置样式 input group buttons in Bootstrap
关于jquery - Bootstrap DatePicker CSS 样式不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30037967/