7

我正在尝试使用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>
4

5 回答 5

3

我已经把这个 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 文件的位置（相对或绝对）有关。

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

于 2013-07-16T01:56:11.760 回答
1

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.... :)

于 2013-09-24T09:54:59.513 回答
0

我在使用“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>
于 2014-10-02T14:27:15.773 回答
0

由于 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"
});
于 2014-02-03T23:25:51.187 回答
0

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();
于 2015-06-05T09:09:58.207 回答