Выберите диапазон дат в одиночном Bootstrap Datepicker

Question

Я использую Bootstrap DatePicker v1.8.0

Нужно выбрать диапазон в одной начальной загрузке, и мне нужно, чтобы входное значение было расположено в порядке возрастания (пример ниже).

Answer 1

При изменении даты к массиву даты добавляется новая дата. Получите даты и проанализируйте их в 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.