多日期选择jQuery插件 MultiDatesPicker for jQuery UI

Multiple-Dates-Picker-for-jQuery-UI是一个多日期选择的jquery控件。

 

GIT源码：

https://github.com/dubrox/Multiple-Dates-Picker-for-jQuery-UI

项目简介：

http://multidatespickr.sourceforge.net/#option-addDates  这里的例子很丰富，需要什么功能照着做就好了。

 

示例：

<script src="../JS/jquery-ui.multidatespicker.js"></script>
 <link href="../CSS/mdp.css" rel="stylesheet" />

<div id="simpliest-usage" class="box" style="margin-left:60px;margin-bottom:30px;" ></div>

                       <div class="col-md-offset-2 col-md-8" style="text-align:center">
                    <button id ="btnGetDates"  type="button" >
                    获取选择日期
                    </button>
                   </div>

<script type="text/javascript">
$(function () {
            var date = new Date();
            var dates = [];

//提前获取加载时需要显示的日期
            $.ajax({
                type: "POST",  //访问WebService使用post方式请求
                contentType: "application/json;utf-8",   //WebService会返回json类型
                url: "../WebService/Func.asmx/SelDates", //调用WebService的地址和方法名称组合
                data: "{}",  //这里是要传递的参数，格式为data:"{paraName:paraValue}"
                dataType: "json",
                async: false, //不能异步，阻塞进程
                success: function (result) {
                    var viewdates = jQuery.parseJSON(result.d);
                    for (var i = 0; i < viewdates.length; i++) {
                        dates.push(new Date(viewdates[i].HolidayDate));
                    }
                }
            });

            $('#simpliest-usage').multiDatesPicker({
                numberOfMonths: [2, 3],
                addDates: dates, //初始化时选择的日期
                minDate: -30, //日期选择从当天的前30天可以选择，再之前的不可选
                maxDate: 180,//日期选择只能为当天的后180天以内，再之后的不可选
                //beforeShowDay: $.datepicker.noWeekends
            });

            $("#btnGetDates").on('click', function (e) {
                var setdates = $('#simpliest-usage').multiDatesPicker('getDates');
                 alert(setdates.toLocaleString());
            });
        });
    </script>