How to add Date Picker Bootstrap 3 on MVC 5 project using the Razor engine?

asp.net-mvc, razor, twitter-bootstrap

Solution

This answer uses the jQuery UI Datepicker, which is a separate include. There are other ways to do this without including jQuery UI.

First, you simply need to add the `datepicker` class to the textbox, in addition to `form-control`:

<div class="form-group input-group-sm">
    @Html.LabelFor(model => model.DropOffDate)
    @Html.TextBoxFor(model => model.DropOffDate, new { @class = "form-control datepicker", placeholder = "Enter Drop-off date here..." })
    @Html.ValidationMessageFor(model => model.DropOffDate)
</div>

Then, to be sure the javascript is triggered after the textbox is rendered, you have to put the datepicker call in the jQuery ready function:

<script type="text/javascript">
    $(function () { // will trigger when the document is ready
       $('.datepicker').datepicker(); //Initialise any date pickers
    });
</script>

Problem

I need some guide lines on how to install a Date Picker Bootstrap 3 on a MVC 5 project using the Razor engine. I found this link here but couldn't make it work in VS2013. Copying from the example in the later link above I've already done the following: ``` bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include( "~/Scripts/bootstrap.js", "~/Scripts/bootstrap-datepicker.js", // ** NEW for Bootstrap Datepicker "~/Scripts/respond.js")); bundles.Add(new StyleBundle("~/Content/css").Include( "~/Content/bootstrap.css", "~/Content/bootstrap-datepicker.css", // ** NEW for Bootstrap Datepicker "~/Content/site.css")); ``` Then I've added the script to the index view as follow ``` @section Scripts { @Scripts.Render("~/bundles/jqueryval") <script type="text/javascript"> $('.datepicker').datepicker(); //Initialise any date pickers </script> } ``` Now, how to call the date picker here? ``` <div class="form-group input-group-sm"> @Html.LabelFor(model => model.DropOffDate) @Html.TextBoxFor(model => model.DropOffDate, new { @class = "form-control", placeholder = "Enter Drop-off date here..." }) @Html.ValidationMessageFor(model => model.DropOffDate) </div> ```

Original source