为什么我的bootstrap-datepicker没有图标日历？ [英] Why my bootstrap-datepicker does not have icon-calendar?
问题描述
我正在尝试使用一起使用以下HTML进行工作：
< div class = input-append date data-date = 12-02-2012 data-date-format = dd-mm-yyyy>
< input class = span2 id = dp3 size = 16 type = text value = 12-02-2012 />
< span class = add-on>< i class = icon-calendar id = cal>< / i>< / span>
< / div>
和JS：
$（document）.ready（function（）{
$（'＃dp3'）。datepicker（）;
}）;
不同之处在于 id = dp3 应用于 input 标记，而不应用于包含的 div 。但是，在您的情况下，这似乎与您引用的包含内容的 how 和 where 有关。
上面的 JSfiddle 直接引用了基本文件（ （来自CDN和作者网站），因此可能与您引用glyphicons / js / css文件的位置（相对或绝对）有关。
直接链接到您的实现或完整代码，除此以外，很难进一步诊断问题。
I am trying to use bootstrap-datepicker.
I have included the datepicker.css and bootstrap-datepicker.js like this:
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/datepicker.css">
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-datepicker.js"></script>
Then in my div, I did like this:
<div class="input-append date" id="dp2" data-date="15-07-2013" data-date-format="dd-mm-yyyy">
<input class="span2" size="16" type="text" value="15-07-2013" readonly>
<label class="add-on"><i class="icon-calendar"></i></label>
</div>
Then at last, I did like this:
<script>
$(function(){
$('#dp2').datepicker();
});
</script>
I can see the date picker, but without the icon.
I wish to have like:
What I did wrong?
Edit
My full code:
<!doctype html>
<html>
<head>
<title>Date</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<link rel="stylesheet" href="themes/readable/bootstrap.css">
<link rel="stylesheet" href="css/datepicker.css">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-datepicker.js"></script>
</head>
<body>
<div class="container">
<div class="well">
<h4>Date Picker</h4>
<div class="input-append date" id="dp2" data-date="15-07-2013" data-date-format="dd-mm-yyyy">
<input class="span2" size="16" type="text" value="15-07-2013">
<label class="add-on"><i class="icon-calendar"></i></label>
</div>
</div>
</div>
<script>
$(function(){
$('#dp1').datepicker();
$('#dp2').datepicker();
});
</script>
</body>
</html>
I've put this JSFiddle together which works using the following HTML:
<div class="input-append date" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
<input class="span2" id="dp3" size="16" type="text" value="12-02-2012"/>
<span class="add-on"><i class="icon-calendar" id="cal"></i></span>
</div>
And JS:
$( document ).ready(function() {
$('#dp3').datepicker();
});
The difference being that id="dp3" is applied to the input tag and not the containing div. However, it seems that in your case it's related to how and where you're referencing your includes.
The JSfiddle above references the base files directly (from both CDN and author sites), so it's likely related to how you are referencing the location (relative or absolute) of the glyphicons/js/css files.
Without a direct link to your implementation or full code, it's hard to diagnose the problem further than this.
这篇关于为什么我的bootstrap-datepicker没有图标日历？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
