【问题标题】:Bootstrap-Datepicker not working properlyBootstrap-Datepicker 无法正常工作
【发布时间】:2016-11-14 09:33:21
【问题描述】:

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

&lt;/body&gt; 标签之前的底部有javascript/jquery 部分:

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

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

【问题讨论】:

  • 你有什么错误吗?
  • 是的,当我想从输入字段中选择某些内容时,它没有显示日期选择器...

标签: javascript jquery css twitter-bootstrap datepicker


【解决方案1】:

我读过引导 datepicker 需要 jquery 1.7.1 及更高版本

检查这个fiddle我使用jquery 1.9.1

<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>
【解决方案2】:

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

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

【讨论】:

  • 不会工作...这是在 localhost 上工作的问题吗?
  • 检查浏览器控制台是否有错误。 chrome中的“ctrl+shift+j”。有没有错误?还可以尝试在“bootstrap-datepicker.min.js”之前移动“bootstrap.min.js”。 js文件的导入顺序应该是: 1. jquery
猜你喜欢
  • 1970-01-01
  • 2021-06-16
  • 2013-09-06
  • 1970-01-01
  • 1970-01-01
  • 2018-04-06
  • 2023-03-26
  • 1970-01-01
相关资源
最近更新 更多