Bootstrap 3 Datetimepicker未显示在ASP.NET MVC应用程序中

Question

I know this is a common problem, but I have scoured all the other questions and tried all possible solutions.

I'm trying to implement a simple Bootstrap 3 datetimepicker in an MVC 5 application, but can't get it to show. The default browser datepicker works, but when I try to use bootstrap, I get a simple text-box with nothing else.

I used NuGet to download the required packages:

Install-Package Bootstrap.v3.Datetimepicker.CSS

This is my model:

    [DataType(DataType.DateTime)]
    [Display(Name = "Due Date")]
    [DisplayFormat(DataFormatString = "{0:G}",
    ApplyFormatInEditMode = true)]
    public DateTime DueDate { get; set; }

This is my view:

    <div class="form-group">
            @Html.LabelFor(model => model.DueDate, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.TextBoxFor(model => model.DueDate, new { @class = "form-control datetimepicker " })
                @Html.ValidationMessageFor(model => model.DueDate, "", new { @class = "text-danger" })
            </div>
        </div>

This is my BundleConfig.cs file:

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js",
                    "~/Scripts/jquery-ui*"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.validate*"));

        bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                    "~/Scripts/modernizr-*"));

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

        bundles.Add(new StyleBundle("~/Content/css").Include(
                 "~/Content/bootstrap.css",
                 "~/Content/themes/base/jquery.ui.all.css",
                 "~/Content/bootstrap-datetimepicker.min.css",
                 "~/Content/site.css"));

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

This is what I have at the bottom of my view (Index.cs) to start the javascript:

@section scripts {
@Scripts.Render("~/bundles/jqueryval")
<script type="text/javascript">
    $(function () {
        $('.datetimepicker').datetimepicker();
    });
</script>}

Am I missing something?

Any kind of help would be very much appreciated!

Answer 1

Turns out I had forgotten to render the bundles, so adding @Scripts.Render("~/bundles/bootstrap") solved the issue. Thank you very much Stephen Muecke and Alexander Derc!