Bootstrap - Adding a Bootstrap Datepicker With the Eternicode Package to an MVC Project

Published: Mvc Estimated reading time: ~1 minutes

Manage Nuget Packages

Search for and install the Eternicode Bootstrap Datepicker https://github.com/eternicode/bootstrap-datepicker

In the BundleConfig.cshtml

   bundles.Add(new ScriptBundle("~/bundles/bootstrap-datepicker").Include(
           "~/Scripts/bootstrap-datepicker.js")); //added for bootstrap datepicker
   bundles.Add(new StyleBundle("~/Content/css").Include(
           "~/Content/bootstrap.css",
           "~/Content/site.css",
           "~/Content/datepicker.css" //added for bootstrap datepicker
           ));

In the shared view _Layout.cshtml make the following changes to the head section

    @*Scripts moved up to the head section so that they render before the body*@
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryval") @*for jquery validation*@
    @Scripts.Render("~/bundles/bootstrap")
    @Scripts.Render("~/bundles/bootstrap-datepicker") @*for bootstrap datepicker*@
    @*Script section for bootstrap datepicker*@ 

    <script>
        var datepicker = $.fn.datepicker.noConflict(); // return $.fn.datepicker to previously assigned value
        $.fn.bootstrapDP = datepicker; // give $().bootstrapDP the bootstrap-datepicker functionality
    </script>

In the View

    <script>
        $(document).ready(function () {
            (function () { //Datepicker begin
                var dateToday = new Date();
                $('.datepicker').bootstrapDP({
                    autoclose: true,
                    todayHighlight: true
                });
                $('.datepicker').bootstrapDP('update', dateToday);
            }());  //Datepicker end
        });
    </script> 

    @*Using Razor Syntax*@
    @Html.EditorFor(model =&gt; model.Date, new { htmlAttributes = new { @class = "datepicker form-control" } })

    @*Alternate form using HTML markup*@
    <input class="datepicker form-control" type="text" />