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:

Uncaught ReferenceError: $ is not defined at 1:417

view page:

<script src="~/Scripts/ckeditor/ckeditor.js"></script>
<script src=".js/2.9.0/moment-with-locales.js"></script>
<link href=".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

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)

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

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:

Uncaught ReferenceError: $ is not defined at 1:417

view page:

<script src="~/Scripts/ckeditor/ckeditor.js"></script>
<script src="http://cdnjs.cloudflare./ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<link href="http://cdn.rawgit./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

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)

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

• javascript
• jquery
• asp-mvc
• asp-mvc-4
• bootstrap-datetimepicker

• 1 very obviously, you've got two bundles called "jquery" declared. First, try removing the duplicate and see if that helps. Looks like moment is included twice too (once in the bundles and once in the HTML) – ADyson Commented Mar 16, 2017 at 11:05
• As a side note, your bundles should have the non-minified versions (so the full version is rendered in debug mode, and the minified version is automatically be loaded in release mode) – user3559349 Commented Mar 16, 2017 at 11:12
• after giving the minified version, also it is not working – user256 Commented Mar 16, 2017 at 11:30
• Possible duplicate of Bootstrap datetimepicker is not a function – Koby Douek Commented Mar 16, 2017 at 11:42

2 Answers 2

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

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

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

In your BundleConfig.cs, include JQuery first:

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:

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

I remend you to use requirejs for js files