bootstrap 日期时间选择器：$ 未定义

Question

我在控制台中遇到错误：

$ is not defined

当我尝试使用 bootstrap datetimepicker

这是我的风格链接：

<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/bootstrap-datetimepicker-master/build/css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" href="css/style.css">

这是脚本链接：

<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="bower_components/moment-develop/moment.js"></script>
<script src="bower_components/bootstrap/js/transition.js"></script>
<script src="bower_components/bootstrap/js/collapse.js"></script>
<script src="bower_components/bootstrap/bootstrap-datetimepicker-master/build/js/bootstrap-datetimepicker.min.js"></script>

这里我使用的是datetimepicker形式：

<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date' id='datetimepicker2'>
                    <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 () {
                $('#datetimepicker2').datetimepicker({
                    locale: 'ru'
                });
            });
        </script>
    </div>
</div>

你能帮我解决这个问题吗？

Answer 1

由于您是在处加载脚本，因此最好将 <script> 标签从 body 内移动到这些之后，或者将脚本加载到 <head> 你的部分 HTML:

<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="bower_components/moment-develop/moment.js"></script>
<script src="bower_components/bootstrap/js/transition.js"></script>
<script src="bower_components/bootstrap/js/collapse.js"></script>
<script src="bower_components/bootstrap/bootstrap-datetimepicker-master/build/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('#datetimepicker2').datetimepicker({
            locale: 'ru'
        });
    });
</script>

现在这应该肯定有效。 $ 和 jQuery 函数只能在加载 jQuery 库后调用，它是一个顺序过程。

如果您也有通用的页眉/页脚，添加上述代码是安全的，因为 jQuery 仅在 #datetimepicker2 元素存在时检查和执行。

bootstrap 日期时间选择器：$ 未定义

bootstrap datetimepicker: $ is not defined

javascript

bootstrapping

datepicker