多日期選擇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>