1. 安装地址
https://github.com/dangrossman/bootstrap-daterangepicker
2. 把以下js文件放入 Scripts 中
daterangepicker.js
moment.js
moment.min.js
3. 把以下CSS放入Content下
daterangepicker-bs3.css
daterangepicker-bs2.css
4.View
注意bootstrap 版本，可能会出现不兼容的问题
@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. 查看结果
7. 参考链接：
http://www.dangrossman.info/2012/08/20/a-date-range-picker-for-twitter-bootstrap/
https://github.com/dangrossman/bootstrap-daterangepicker
时间： 2024-10-12 08:07:55