web-dev-qa-db-ja.com

bootstrap-datepickerにicon-calendarがないのはなぜですか？

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>

日付ピッカーは表示されますが、アイコンは表示されません。

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>
twitter-bootstrapdatepicker
6
Jackson Tale

私は この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ファイルの場所（相対または絶対）を参照する方法に関連している可能性があります。

実装または完全なコードへの直接リンクがなければ、これ以上問題を診断することは困難です。

3
nickhar

これを使用することで私のために動作します：:)

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

これが役立つことを願っています.... :)

1
sunday03

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"
});
0
Jens A. Koch

「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>
0
arn-arn

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の1行...

$(".my-date-picker").datepicker();
0
Dhrupit dave