Bootstrap-Datepicker无法正常工作

时间:2016-11-14 09:33:21

标签: javascript jquery css twitter-bootstrap datepicker

我的bootstrap-datetimepicker无法正常工作
这个问题已在很多时候被问过,但hereherehere以及其他人的回答并没有帮助我...

位于<head>我的网页顶部,包括:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">

然后在我的form我想这样打电话给他:

<div class="col-md-4">
    <label class="control-label" for="birthday">Birthday:</label>
       <div class="form-group">
          <div class='input-group date' id='datetimepicker'>
              <input type='text' class="form-control" placeholder="dd/mm/yyyy" value="" />
              <span class="input-group-addon">
                 <span class="glyphicon glyphicon-calendar"></span>
              </span>
           </div>
       </div>
</div>

</body>标记之前的底部有javascript/jquery部分:

<script type="text/javascript">
   $('#datetimepicker').datepicker();
</script>

我做错了什么?有人可以纠正我的错误吗?

2 个答案:

答案 0 :(得分:1)

尝试在document ready function中初始化包装插件。

<script type="text/javascript">
    $(document).ready(function() {
        $('#datetimepicker').datepicker();
    });
</script>

答案 1 :(得分:1)

我读过bootstrap datepicker需要jquery 1.7.1及以上

使用jquery 1.9.1

检查此fiddle即时消息
<div class="col-md-4">
    <label class="control-label" for="birthday">Birthday:</label>
       <div class="form-group">
          <div class='input-group date' id='datetimepicker'>
              <input type='text' class="form-control" placeholder="dd/mm/yyyy" value="" />
              <span class="input-group-addon">
                 <span class="glyphicon glyphicon-calendar"></span>
              </span>
           </div>
       </div>
</div>