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

Question

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> 

Answer 1

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>