Question

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

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

enter image description here

我希望有：

enter image description here

我做错了什么？

修改

我的完整代码：

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

Answer 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。但是，在您的情况下，它似乎与如何和您引用您的包含有关。

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

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

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

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

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

Answer 4

我使用＆＃34; icon-calendar＆＃34;所以我只使用了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>

Answer 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();

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

5 个答案: