MVC4 使用 bootstrap daterangepicker

1. 安装地址https://github.com/dangrossman/bootstrap-daterangepicker2. 把以下js文件放入 Scripts 中daterangepicker.jsmoment.js

moment.min.js

3. 把以下CSS放入Content下daterangepicker-bs3.cssdaterangepicker-bs2.css4.View注意bootstrap 版本,,可能会出现不兼容的问题@using Microsoft.Web.Mvc@model WebApplication1.Controllers.HomeController.HomeVm@{Layout = "~/Views/Shared/_Layout.cshtml";}@section Scripts{<link href="" 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=""></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. 参考链接:https://github.com/dangrossman/bootstrap-daterangepicker

因为它抚平了心底的不安;当你尝到了极品的美食,

MVC4 使用 bootstrap daterangepicker

相关文章:

你感兴趣的文章:

标签云: