twitter-bootstrap 为什么我的 bootstrap-datepicker 没有图标日历？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17664515/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why my bootstrap-datepicker does not have icon-calendar?
提问by Hymanson Tale
I am trying to use bootstrap-datepicker.
我正在尝试使用bootstrap-datepicker。
I have included the datepicker.cssand bootstrap-datepicker.jslike this:
我已经包括了datepicker.css和bootstrap-datepicker.js这样的：
<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 中，我这样做了：
<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>
采纳答案by nickhar
I've put this JSFiddletogether which works using the following HTML:
我已经把这个 JSFiddle放在一起，它使用以下 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:
和JS：
$( document ).ready(function() {
$('#dp3').datepicker();
});
The difference being that id="dp3"is applied to the inputtag and not the containing div. However, it seems that in your case it's related to howand whereyou're referencing your includes.
不同之处在于id="dp3"应用于input标签而不是包含div. 但是，在您的情况下，它似乎与您引用包含的方式和位置有关。
The JSfiddleabove 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.
上面的JSfiddle直接引用了基本文件（来自 CDN 和作者站点），因此它可能与您如何引用 glyphicons/js/css 文件的位置（相对或绝对）有关。
Without a direct link to your implementation or full code, it's hard to diagnose the problem further than this.
如果没有到您的实现或完整代码的直接链接，就很难比这更进一步诊断问题。
回答by sunday03
It works for me by using this: :)
通过使用它对我有用:)
<div class="input-append date" id="theDate" data-date-format="dd-mm-yyyy">
<form:input path="theDate" class="span2" size="130" readonly="true"/>
<span class="add-on"><i class="icon-th"><img src="${pageContext.request.contextPath}/....../datepicker.png"/></i></span>
</div>
Hope this will help.... :)
希望这会有所帮助.... :)
回答by Jens A. Koch
Because of markup changes for Bootstrap v2 and Bootstrap v3. The sandbox demo helped me to find the correct markup: http://eternicode.github.io/bootstrap-datepicker/
由于 Bootstrap v2 和 Bootstrap v3 的标记更改。沙箱演示帮助我找到了正确的标记：http: //eternicode.github.io/bootstrap-datepicker/
<div class="input-append date">
<input type="text" class="span2">
/* this next line should help you */
<span class="add-on"><i class="icon-th"></i></span>
</div>
$('.input-append.date').datepicker({
format: "mm/yyyy"
});
回答by arn-arn
I had the same experience using the "icon-calendar" so I just used the bootstrap glyphicon which comes with the bootstrap lib and it worked like a charm:
我在使用“icon-calendar”时也有同样的经历，所以我只使用了 bootstrap lib 附带的 bootstrap glyphicon，它的作用就像一个魅力：
<div class="well">
<div class="input-append date" id="dp3" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
<input class="span2" size="16" type="text" value="12-02-2012" readonly>
<span class="add-on"><span class="glyphicon glyphicon-calendar"></span>
</div>
</div>
回答by Dhrupit dave
HTML:
HTML：
<label>Date</label>
<div class="input-append">
<input class="my-date-picker" id="foo" type="text" />
<label for="foo" class="add-on"><i class="icon-calendar"></i></label>
</div>
And one line of javaScript to complete your job...
还有一行 javaScript 来完成你的工作......
$(".my-date-picker").datepicker();
