2

ここからブートストラップ日時ピッカーを使用しようとしています: http://eonasdan.github.io/bootstrap-datetimepicker/

しかし、単純な例を実行できないようです。カレンダー グリフをクリックしても何も起こりません。日時ピッカーが表示されるはずです。ソースコードは次のとおりです。

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Template for bootstrap</title>
    <link href="dependencies/bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="dependencies/bootstrap-datetimepicker.min.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="dependencies/jquery/jquery-2.0.3.js"></script>
  </head>

  <body>
    <div class="container">
      <div class="col-md-10">
        <div class="well">
          <div class="form-group">
            <div class="input-group date" id="datetimepicker1">
              <input type="text" class="form-control">
              <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span>
              </span>
            </div>
          </div>
        </div>
        <script type="text/javascript">
          $(function() {
            $('#datetimepicker1').datetimepicker();
          });

        </script>
      </div>
    </div>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script type="text/javascript" src="dependencies/bootstrap/js/bootstrap.js"></script>
    <script type="text/javascript" src="dependencies/bootstrap-datetimepicker.min.js"></script>
  </body>

</html>

編集 1: js ライブラリを含めた後、本文の終了タグの前に timepicker 関数を呼び出してみましたが、成功しませんでした。

<body>
  <div class="container">
    <div class="col-md-10">
      <div class="well">
        <div class="form-group">
          <div class="input-group date" id="datetimepicker1">
            <input type="text" class="form-control">
            <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span>
            </span>
          </div>
        </div>
      </div>

    </div>
  </div>

  <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <script type="text/javascript" src="dependencies/bootstrap/js/bootstrap.js"></script>
  <script type="text/javascript" src="dependencies/bootstrap-datetimepicker.min.js"></script>
  <script type="text/javascript">
    $(function() {
      $('#datetimepicker1').datetimepicker();
    });

  </script>
</body>
4

1 に答える 1

2

リソースが正しくリンクされていることを確認し、外部リンクからリソースをダウンロードして置き換えて使用します。このコードを試して、

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Template for bootstrap</title>
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="http://eonasdan.github.io/bootstrap-datetimepicker/styles/bootstrap-datetimepicker.min.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
  </head>

  <body>
    <div class="container">
      <div class="col-md-10">
        <div class="well">
          <div class="form-group">
            <div class="input-group date" id="datetimepicker1">
              <input type="text" class="form-control">
              <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script type="text/javascript" src="http://eonasdan.github.io/bootstrap-datetimepicker/scripts/bootstrap.min.js"></script>
    <script type="text/javascript" src="http://eonasdan.github.io/bootstrap-datetimepicker/scripts/bootstrap-datetimepicker.js"></script>
    <script type="text/javascript">
      $(function() {
        $('#datetimepicker1').datetimepicker();
      });

    </script>
  </body>

</html>
于 2013-10-21T12:33:22.860 に答える