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>