未捕获的ReferenceError：在mvc中加载bootstrap日期时间选择器时未定义$

When I am adding the bootstrap date time picker, the calendar when clicking on the "glyphicon glyphicon-calendar" is not loading, have added all the files but it shows the error:

当我添加引导日期时间选择器时，单击“glyphicon glyphicon-calendar”时没有加载日历，添加了所有文件，但它显示错误：

Uncaught ReferenceError: $ is not defined at 1:417

未捕获的ReferenceError：$未定义为1：417

view page:

查看页面：

<script src="~/Scripts/ckeditor/ckeditor.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<link href="http://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" rel="stylesheet">

 <div class="form-group">
        @Html.LabelFor(model => model.Date, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">         
            <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>      

            @Html.ValidationMessageFor(model => model.Date, "", new { @class = "text-danger" })
        </div>
    </div>

BundleConfig.cs

BundleConfig.cs

bundles.Add(new StyleBundle("~/css/bootstrap").Include(
            "~/assets/css/bootstrap.min.css"
            ));
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
            "~/assets/js/jquery.min.js"));

 bundles.Add(new ScriptBundle("~/bundles/moment").Include(
                   "~/Scripts/moment.js"));

        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
           "~/assets/js/jquery.min.js"));

        bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
            "~/assets/js/bootstrap.min.js",
            "~/assets/js/bootstrap-datetimepicker.min.js",
            "~/assets/js/slimscroll/jquery.slimscroll.min.js"
            ));

dafault.cshtml page (layout page)

dafault.cshtml页面（布局页面）

 @Styles.Render("~/css/bootstrap")
 @Scripts.Render("~/bundles/moment")
 @Scripts.Render("~/bundles/jquery")
 @Scripts.Render("~/bundles/bootstrap")

Why is the calendar is not loading when clicking on the link and the generating in the $ jquery, I think I have correctly given the code and scripts. can anyone please help me to find the solution ??

为什么在点击链接和$ jquery中的生成时没有加载日历，我想我已经正确地给出了代码和脚本。谁能帮我找到解决方案？

2 个解决方案

#1

First, move the $('#datetimepicker1').datetimepicker(); to $( document ).ready:

首先，移动$（'＃datetimepicker1'）。datetimepicker（）;到$（文件）.ready：

<script>
    $( document ).ready(function() {
        $('#datetimepicker1').datetimepicker();
    });
</script>

Also - You are trying to use JQuery functionality before loading it.

此外 - 您正在尝试在加载之前使用JQuery功能。

In your BundleConfig.cs, include JQuery first:

在BundleConfig.cs中，首先包含JQuery：

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
            "~/assets/js/jquery.min.js"));
bundles.Add(new StyleBundle("~/css/bootstrap").Include(
            "~/assets/css/bootstrap.min.css"));
...
Other includes
...

And in your dafault.cshtml page, change the rendering order and leave the bootstrap css for last:

在dafault.cshtml页面中，更改呈现顺序并将引导程序css留到最后：

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/bundles/moment")
@Styles.Render("~/css/bootstrap")

#2

I recommend you to use requirejs for js files

我建议你对js文件使用requirejs

#1