在单个Bootstrap Datepicker中选择日期范围

Question

我正在使用Bootstrap DatePicker v1.8.0

需要在单个引导程序中选择范围，我需要将输入值按升序排列（以下示例）。

Answer 1

在更改日期时，date数组将附加新的日期。获取日期并在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连接的字符串形式返回开始日期和结束日期的串联。