Чтобы выбрать диапазон дат, я использую плагин Air Datepicker .
Для подключения плагина я использую CDN:
<link href="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/css/datepicker.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/js/datepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/js/i18n/datepicker.en.min.js"></script>
Инициализация плагина:
var block = document.querySelector("#block");
document.querySelector("#datepicker").addEventListener("focus", function() {
block.style.display = "none";
}, false);
document.querySelector("#datepicker").addEventListener("blur", function() {
block.style.display = "block";
}, false);
var maxdate = new Date(); //get current date
maxdate.setDate(maxdate.getDate() + 14); //add 14 days
function parseDate(str) {
var mdy = str.split('/');
return new Date(mdy[2], mdy[0]-1, mdy[1]);
}
function datediff(first, second) {
return Math.round((second-first)/(1000*60*60*24));
}
$(function() {
var myDatepicker = $('#datepicker').datepicker({
language: 'en',
range:true,
autoClose: 'true',
clearButton: 'true',
minDate: new Date(),
maxDate: maxdate,
multipleDatesSeparator : ' - ',
onSelect: function onSelect(selectedDates) {
console.log(selectedDates);
if(selectedDates !== undefined && selectedDates != '' && selectedDates.indexOf('-') > -1){
var mdy = selectedDates.split('-');
$("#arr_date").val(mdy[0]);
$("#dep_date").val(mdy[1]);
$("#num_nights").val(datediff(parseDate(mdy[0]), parseDate(mdy[1])));
}
}
})
});
HTML код:
<input type="text" id="datepicker" placeholder="Select..." class="rental-input" />
<!--Start Date <input type="text" id="arr_date"><br />
End Date <input type="text" id="dep_date"><br />-->
<div id="block">You have chosen: <input type="text" id="num_nights" class="rental-total" readonly />days rental</div>
Как сделать следующий функционал? Пользователь нажимает на первую дату, например, 1 апреля.
Ему показывают только 14 дней, которые он может выбрать, до 14 апреля.
Либо пользователь щелкает 15 апреля, он также показывает только 14 дней, которые можно выбрать, до 29 апреля.
И так при нажатии на любое первое свидание.
В обоих случаях это minDate: 0 и maxDate: 14,
Прошу вашей помощи! Спасибо!