MVC4 使用 bootstrap daterangepicker

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{





    


    
    
}



    

        @TempData["datetime"]
    
    @using (Html.BeginForm("Index", "Home", FormMethod.Post))
    {
        

            @Html.TextBoxFor(m => m.datetime, new { @class = "form-control daterange", @readonly = "" })
        


        
    }

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