引导日期选择器无法正常工作答案

【问题标题】：Bootstrap datepicker not working correctly引导日期选择器无法正常工作
【发布时间】：2015-01-18 17:36:59
【问题描述】：

在我的网络应用程序中，我使用的是引导组件；在我的一个页面中，我试图放置一个引导日期选择器，或者更好的是一个日期时间选择器，但仍然没有运气。

我的 css 和 js 导入是（按顺序）：

bootstrap.css
datepicker.css
jquery.js
bootstrap.js
bootstrap-datepicker.js

我写的代码是：

<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date'>
                    <input data-format="dd/MM/yyyy hh:mm:ss" type='text' class="form-control" id='datetimepicker2' />
                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
        <script type="text/javascript">
        $(document).ready(function() {
                $('#datetimepicker2').datetimepicker();
            });
        </script>
    </div>
</div>

但我尝试了很多脚本组合（避免文档就绪函数调用而只调用函数），在 div 和输入上设置“datetimepicker2”id，总是没有运气。

当我尝试我的日期选择器时，没有任何反应，在控制台中我总是得到：

uncaught typeerror undefined is not a function

错误就行了：

$('#datetimepicker2').datetimepicker();

我在网上搜索过，我不是唯一一个遇到这个问题的人，很多人解决了在 div 类中添加“日期”的问题，但这对我来说没有用。其他人也建议导入jQueryUI，但仍然没有运气。有什么提示吗？

【问题讨论】：

您已加载 bootstrap-datepicker.js 并尝试使用 datetimepicker 。是这样吗？
看来你错过了 moment.js ......工作小提琴：jsfiddle.net/0n2ok61a
这当然是问题之一，就好像我把 datepicker 它像一个魅力一样工作，但是如果我导入 datetimepicker.js 并尝试调用 datetimepicker 它仍然不起作用。 @RobertRozas 你说的 moment.js 是什么意思？
DateTimepicker 依赖于 moment.js ...
还是没有运气。 DatePicker 可以正常工作，而 datetimepicker 不能。我导入了 moment.js 并在 js 文件夹中创建了一个带有 mylanguage.js 的 locales 文件夹，但仍然无法正常工作。

标签： javascript jquery css twitter-bootstrap datepicker

【解决方案1】：

这似乎是一个 jquery 冲突。检查您的 jquery 版本和 bootstrap datepicker 所需的 jquery 版本，或者您可能在 html 页面中导入了两个 jquery 版本。

【讨论】：

我知道我在此评论中添加内容迟到了，但答案并不能直接帮助解决问题。

【解决方案2】：

<div class="container">
  <div class="row">
    <div class='col-sm-6'>
      <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 glyphicon-calendar"></span>
          </span>
        </div>
      </div>
    </div>
    <script type="text/javascript">
      $(function() {
        $('#datetimepicker1').datetimepicker();
      });
    </script>
  </div>
</div>

上面的 sn-p 是我们所需要的，但只需要添加 1 行。那是在脚本标签中。复制上面的 div 代码和下面的脚本部分。

$.noConflict();
$(function() {
  $('#datetimepicker1').datetimepicker();
});

我希望这能清楚地回答你的问题....

代码礼貌：http://eonasdan.github.io/bootstrap-datetimepicker/

【讨论】：