CODEWITHSUNDEEP
jquerycsstwitter-bootstrapasp.net-mvc-4datetimepicker
Johnrad
Johnrad

Reputation: 2655

Bootstrap Datetimepicker not recognized by MVC application

I am trying to include bootstrap datetimepicker into my MVC application but my project does not seem to recognize it.

I first downloaded the Bootstrap.v3.Datetimepicker.css nuget package which downloadad all necessary dependencies required for the utility.

As per my research the following is required to run datetimepicker:

After the installation I modified the following in my BundleConfig.cs file:

First including the css file:

bundles.Add(new StyleBundle("~/Content/css").Include(
                        "~/Content/bootstrap.css",
                        "~/Content/datepicker.css",
                        "~/Content/bootstrap-datetimepicker.css",
                        ........
                        ));

Then added a couple of bundles to include the JS files required:

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

bundles.Add(new ScriptBundle("~/bundles/datetimepicker").Include(
                        "~/Scripts/bootstrap-datetimepicker.js"));

bundles.Add(new ScriptBundle("~/bundles/moment").Include(
                        "~/Scripts/moment-with-locales.min.js",       
                        "~/Scripts/moment.min.js"));

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-1.9.1.js"));

bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                        "~/Scripts/jquery-ui-1.8.24.js"));

I included the following into my _Layout.cshtml file :

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

Lastly, in my view where I am wanting to actually call the datetimepicker, I have the following script:

    @section Scripts {
    @Scripts.Render("~/bundles/datetimepicker");
    <script>

        $('.input-group.date').datetimepicker();

    </script>
}

I have never had a problem like this in the past. I use the bootstrap DATEPICKER fairly regularly in other parts of my application doing the exact same architecture and it works just fine.

My application does nothing to recognize the additions the the project. My scripting block in my view even recognizes the old datepicker in the intellisense but not datetimepicker.

Upvotes: 1

Views: 668

Answers (1)

Fenton
Fenton

Reputation: 250892

This is potentially down to the ordering (although you didn't mention where your bundles are placed in the layout file).

If your Scripts section is rendering before your bundles in the layout file, it is likely that the date picker is failing to find its dependencies at the time you use it.

For example, this might cause a problem:

@RenderSection("Scripts", false)

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

But this should work...

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

@RenderSection("Scripts", false)

Upvotes: 1

Related Questions