Моя задача чтобы в каждом новом календаре, были неактивны даты выбранные в предыдущем. Думал выбранные даты записывать в массив и делать их disabled
. Но что то идет не так, не могу понять что именно
$(document).ready(function(){
$('.add-tarif__tabs li').each(function () {
var tab_id = $(this).find('a').attr('href');
var period = $(tab_id);
var start = period.find('.startDate');
var end = period.find('.endDate');
startCalendar(start, end);
});
var addTarifCount = 0;
$('.add-tarif__add-period').on('click', function () {
addTarifCount += 1;
var startId = "start_" + addTarifCount;
var endId = "end_" + addTarifCount;
$(this).before('<div class="add-tarif__box"><h4 class="title">Период действия</h4><div class="reservation-calendar add-tarif__period-date line">' +
'<div class="reservation-calendar__item"><input class="start startDate" type="text" readonly="" id="'+startId+'">' +
'</div>' +
'<div class="reservation-calendar__item"><input class="start endDate" type="text" readonly="" id="'+endId+'">' +
'</div></div>' +
'</div></div></div></div>');
startCalendar($("#"+startId), $("#"+endId));
});
function startCalendar(start, end) {
var disabledTarifDates = ["17-07-2018"];
console.log('dis', disabledTarifDates);
var $starttarifDate = start;
var $endtarifDate = end;
$starttarifDate.datepicker({
inline: false,
range: true,
toggleSelected: true,
minDate: new Date(),
multipleDatesSeparator: ",",
dateFormat: 'dd-mm-yyyy',
onSelect: function (fd, date) {
if(date){
var arrDate = fd.split(",");
$starttarifDate.val(arrDate[0]);
$endtarifDate.val(arrDate[1]);
if(arrDate[1]){
$('.datepicker').css("left", "-100000px");
$starttarifDate.blur();
}
$endtarifDate.on('click', function () {
$starttarifDate.datepicker().val(arrDate[0]).data('datepicker').show();
});
disabledTarifDates.forEach(function () {
console.log(arrDate);
var disabledTarifDatesNew = arrDate;
console.log(disabledTarifDates)
})
}
},
onRenderCell: function(date, cellType) {
var formatted = getFormattedDate1(date);
if (cellType == 'day') {
var returnDay = {
disabled: false
};
var selectedDate = disabledTarifDates.filter(function(date){
return date == formatted;
}).length;
if( selectedDate > 0 ){
returnDay = {
classes: 'add-to-disable-day',
disabled: true
};
}
return returnDay;
}
}
});
}
function getFormattedDate1(date) {
var year = date.getFullYear(),
month = date.getMonth() + 1,
date = date.getDate();
return date + '-' + month + '-' + year ;
}
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/css/datepicker.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/js/datepicker.js"></script>
<div class="add-tarif__period-item tabs-panel is-active" id="panel1" role="tabpanel" aria-labelledby="panel1-label">
<div class="add-tarif__box">
<h4 class="title">Период действия</h4>
<div class="reservation-calendar add-tarif__period-date line">
<div class="reservation-calendar__item">
<input class="start startDate" type="text" readonly="" id="startPeriod1">
</div>
<div class="reservation-calendar__item">
<input class="start endDate" type="text" readonly="" id="endPeriod1">
</div>
</div>
</div>
<button class="add-tarif__add-period" type="button">Добавить период</button>
</div>
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Как сделать что бы при нажатии на кнопку Calculate, если некоторые select со значением 0, они выделялись красной рамкой, а они сейчас выделяются все,...
Как ограничить вывод символов и их количество в input + через каждые 4 цифры ставить пробел
Как мне продолжить создавать фильтр для продуктов? Есть созданы объекты