0

我正在尝试为引导安装此 datetimepicker： https ://github.com/Eonasdan/bootstrap-datetimepicker/wiki/Installation

我在文档的标题中有这个：

    <script src="/js/jquery-1.11.1.min.js"></script>
    <script src="/js/moment.min.js"></script>

这在页脚中：

    <script src="/js/bootstrap.min.js"></script>
    <script src="/js/bootstrap-datetimepicker.min.js"></script>

这是使用选择器的代码：

                <div class="form-group">
                    <div class='input-group date' >
                        <input type='text' name="picker" class="form-control" id='datetimepicker'/>
                        <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                    </div>
                </div>

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

问题是 .datetimepicker 是一个“未解决的函数”。为什么？

编辑：

IDE（PHPStorm）说它是未解决的功能。并在 Chrome 中实际运行它确认：

    bootstrap-datetimepicker.min.js:1 Uncaught TypeError: undefined is not a function
    myfile.php:42 Uncaught TypeError: undefined is not a function
    bootstrap-datetimepicker.min.js:1 Uncaught Error: Must choose at least one picker

Edit2：我更新了页眉/页脚。标题：

页脚：

<script src="/js/bootstrap.min.js"></script>
<script src="/js/moment.min.js"></script>
<script src="/js/bootstrap-datetimepicker.min.js"></script>
<script src="/js/bootstrap-rowlink.js"></script>
<script src="/js/myscripts.js"></script>
<script type="text/javascript">
    $(function () {
        $('#datetimepicker').datetimepicker();
    });
</script>

现在 IDE 将 datetimepicker() 识别为一个函数，但在 Chrome 中仍然存在同样的问题！（看上面）

4

4 回答 4

1

我认为你打电话$('#datetimepicker').datetimepicker();太早了，你应该像这样组织你的代码：

<script src="/js/bootstrap.min.js"></script>
<script src="/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript">
                $(function () {
                    $('#datetimepicker').datetimepicker();
                });
</script>
于 2014-12-09T13:19:45.350 回答
1

尝试在标题中仅包含 jQuery：

<link rel="stylesheet" type="text/css" media="screen" href="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/master/build/css/bootstrap-datetimepicker.min.css" />
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.css" rel="stylesheet">
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.1.min.js"></script>

这些在页脚中：

<script type="text/javascript" src="scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="scripts/moment.js"></script>
<script type="text/javascript" src="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/master/src/js/bootstrap-datetimepicker.js"></script>

作者使用 jQuery 2.1.1，因此他的插件可能依赖于该版本。

编辑

我也无法让它工作。但是，自从 Moment.js 更新到 2.8.4 版本后，在其 Github 页面上创建了一些问题。试试Smalot 的 Bootstrap Datepicker。它也维护得很好，对我有用。

于 2014-12-09T13:20:22.910 回答
0

检查作者网站上的示例

你用错了，你需要引用封闭的 div 而不是你的输入元素。

您的 HTML 应如下所示：

              <div class="form-group">
                    <div class='input-group date' id='datetimepicker' >
                        <input type='text' name="picker" class="form-control"/>
                        <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                    </div>
                </div>

于 2014-12-09T13:48:37.487 回答
0

尝试在文档就绪时调用该函数

<script type="text/javascript">
   $(document).ready(function () {
       $('#datetimepicker').datetimepicker();
   });
</script>
于 2014-12-09T13:22:16.827 回答