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

by

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>

More Related Contents:

  1. Html.DropdownListFor selected value not being set
  2. How to use jquery or ajax to update razor partial view in c#/asp.net for a MVC project
  3. Replace line break characters with in ASP.NET MVC Razor view
  4. Add CSS or JavaScript files to layout head from views or partial views
  5. Writing/outputting HTML strings unescaped
  6. Using MVC HtmlHelper extensions from Razor declarative views
  7. How to render a Section in a Partial View in MVC3?
  8. Razor-based view doesn’t see referenced assemblies
  9. Saving Many to Many relationship data on MVC Create view
  10. ASP.NET MVC 3 Razor – Adding class to EditorFor
  11. Can Razor views be compiled?
  12. How can I load Partial view inside the view?
  13. Unobtrusive validation not working on dynamically-added partial view
  14. Razor View Engine : An expression tree may not contain a dynamic operation
  15. MVC ViewBag Best Practice [closed]
  16. Html.Textbox VS Html.TextboxFor
  17. DataAnnotations validation (Regular Expression) in asp.net mvc 4 – razor view
  18. error with decimal in mvc3 – the value is not valid for field
  19. How to link HTML5 form action to Controller ActionResult method in ASP.NET MVC 4
  20. Bootstrap glyphicon not showing in Form
  21. MVC Razor view Intellisense broken in VS 2013/2015/2017
  22. Adding a css class to select using @Html.DropDownList()
  23. Razor: @Html.Partial() vs @RenderPage()
  24. How can I implement a theme from bootswatch or wrapbootstrap in an MVC 5 project?
  25. Why doesn’t Visual Studio code formatting work properly for Razor markup?
  26. how to add script src inside a View when using Layout
  27. Html.DisplayFor not posting values to controller in ASP.NET MVC 3
  28. VS2013 does not compile ASP.NET MVC5 views
  29. Razor Nested WebGrid
  30. Html.Raw() in ASP.NET MVC Razor view

Leave a Comment