当前位置：首页 > news >正文

MVC4 使用 bootstrap daterangepicker

news 来源：原创 2024/5/4 15:35:26

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. 查看结果