Question

我正在尝试安装此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是一个＆＃34;未解析的函数＆＃34;。为什么呢？

编辑：

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中的问题仍然存在！（见上文）

Answer 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>

Answer 2

尝试在标题中仅包含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's Bootstrap Datepicker。它维护得很好，对我有用。

Answer 3

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

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

Answer 4

查看作者site

中的示例

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

您的HTML应如下所示：

＆＃13;

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

＆＃13;

Jquery函数不加载 - undefined不是函数

4 个答案: