1. Installation Address
Https://github.com/dangrossman/bootstrap-daterangepicker
2. Put the following JS file into the Scripts
Daterangepicker.js
Moment.js
Moment.min.js
3. Put the following CSS into the content
Daterangepicker-bs3.css
Daterangepicker-bs2.css
4.View
Note The bootstrap version may appear incompatible with the issue
@using Microsoft.web.mvc@model webapplication1.controllers.homecontroller.homevm@{Layout = "~/views/shared/_ Layout.cshtml ";} @section scripts{<link href= "Http://netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel= " Stylesheet "><link href=" ~/content/daterangepicker-bs3.css "rel=" stylesheet "/><script type=" text/ JavaScript "src=" Https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js "></script><script Type= "Text/javascript" src= "Http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js" ></script ><script src= "~/scripts/moment.js" ></script> <script src= "~/scripts/daterangepicker.js" >< /script> <script> $ (document). Ready (function () {$ ('. Form-control.daterange '). Daterangepicke R ({format: ' dd/mm/yyyy hh:MM:ss ', locale: {cancellabel: ' Clear '}, Timepicker:true, timepickerincrement:1}); $ ('. Form-control.daterange '). On (' Cancel.daterangepicker ', function (event, picker) {PICKER.ELEMENT.V Al ("); }); }); </script>}<body> <div> @TempData ["datetime"] </div> @using (Html.BeginForm ("in Dex "," Home ", FormMethod.Post)) {<div class=" Input-group "> @Html. textboxfor (M = m.datetime , new {@class = "Form-control daterange", @readonly = ""}) </div> <input type= "Submit" value= "Sub MIT "/>}</body>
5.Controller
public class Homecontroller:controller {public class HOMEVM {public string datetime {get; set;} } [HttpGet] Public ActionResult Index () { return View (); } [HttpPost] Public ActionResult Index (HOMEVM vm) { tempdata["datetime"] = Vm.datetime; return View (); } }
6. View Results
7. Reference Links:
http://www.dangrossman.info/2012/08/20/a-date-range-picker-for-twitter-bootstrap/
Https://github.com/dangrossman/bootstrap-daterangepicker
MVC4 using bootstrap Daterangepicker