为什么我的 bootstrap-datepicker 没有图标日历？答案

【问题标题】：Why my bootstrap-datepicker does not have icon-calendar?为什么我的 bootstrap-datepicker 没有图标日历？
【发布时间】：2013-07-15 21:45:50
【问题描述】：

我正在尝试使用bootstrap-datepicker。

我已经像这样包含了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>

然后在我的 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>

最后，我这样做了：

<script>

    $(function(){

      $('#dp2').datepicker();

      });
</script>

我可以看到日期选择器，但没有图标。

我希望有：

我做错了什么？

编辑

我的完整代码：

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

【问题讨论】：

你在正确的 img 文件夹中有字形吗？
@glosrob 嗯...我猜不是
@glosrob 我将github.com/twitter/bootstrap/tree/master/img 添加到我的文件夹中，仍然没有图标日历

标签： twitter-bootstrap datepicker

【解决方案1】：

我将this 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>

还有 JS：

$( document ).ready(function() {
    $('#dp3').datepicker();
});

区别在于id="dp3" 应用于input 标记而不是包含div。但是，在您的情况下，它似乎与您引用包含的 how 和 where 有关。

上面的 JSfiddle 直接引用了基本文件（来自 CDN 和作者网站），因此它可能与您引用 glyphicons/js/css 文件的位置（相对或绝对）的方式有关。

如果没有指向您的实现或完整代码的直接链接，很难进一步诊断问题。

【讨论】：

您好，我尝试了您的 JSFiddle 链接，但仍然看不到那个日历图标。 oi42.tinypic.com/2h39csi.jpg
@TimS 我认为链接的资源已经改变；可能会更新库。如果需要，我会查看并更新。当我回答它时，它确实有效。

【解决方案2】：

使用这个对我有用:)

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

希望这会有所帮助.... :)

【讨论】：

请添加一个示例，说明如何改进您的答案。
嗨 Szymon，这是一个例子：

【解决方案3】：

由于 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"
});

【讨论】：

【解决方案4】：

我在使用“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>

【讨论】：

你有一个多余的<span>标签：<span class="add-on">没有关闭

【解决方案5】：

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>

还有一行 javaScript 来完成你的工作......

$(".my-date-picker").datepicker();

【讨论】：