在单个引导日期选择器选择日期范围(Pick a date range in single Boots

我使用的自举的DatePicker v1.8.0

需要在一个单一的引导来选择范围，我需要的输入值将被布置在上升（下面例子）顺序。

于改变日期，日期阵列附加有新的日期。获取日期和解析它changeDate事件侦听器，并重新设置它。

 $('#date').datepicker({ format: "M yyyy", startView: 1, minViewMode: 1, maxViewMode: 2, multidate: true, multidateSeparator: "-", autoClose:true, }).on("changeDate",function(event){ var dates = event.dates, elem=$('#date'); if(elem.data("selecteddates")==dates.join(",")) return; //To prevernt recursive call, that lead to lead the maximum stack in the browser. if(dates.length>2) dates=dates.splice(dates.length-1); dates.sort(function(a,b){return new Date(a).getTime()-new Date(b).getTime()}); elem.data("selecteddates",dates.join(",")).datepicker('setDates',dates); }); function getDates() { console.log($("#date").datepicker("getDates")); console.log($("#date").datepicker("getUTCDates")); console.log($("#date").data('datepicker').getFormattedDate('yyyy/mm')); }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css" rel="stylesheet"/> <input type="text" id="date"><button onclick="getDates()">Get Dates</button>

要获取的日期，

$("#date").datepicker("getDates") -返回本地时间选择的开始和结束日期的数组。

$("#date").datepicker("getUTCDates") -返回UTC时间选择的开始和结束日期的数组。

$("#date").data('datepicker').getFormattedDate('yyyy/mm') -返回开始和结束日期的级联作为格式化给定的格式，并通过加入串multidateSeparator 。