MVC4 uses bootstrap daterangepicker and mvc4bootstrap
1. installation address
Https://github.com/dangrossman/bootstrap-daterangepicker
2. Put the following js files in Scripts
Daterangepicker. js
Moment. js
Moment. min. js
3. Put the following CSS under the Content
Daterangepicker-bs3.css
Daterangepicker-bs2.css
4. View
Note that the bootstrap version may be incompatible.
@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').daterangepicker( { 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.val(''); }); }); </script> }<body> <div> @TempData["datetime"] </div> @using (Html.BeginForm("Index", "Home", FormMethod.Post)) { <div class="input-group"> @Html.TextBoxFor(m => m.datetime, new { @class = "form-control daterange", @readonly = "" }) </div> <input type="submit" value="Submit" /> }</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