Как сделать подгрузку disabled date сразу?

180
17 августа 2018, 23:10

Моя задача чтобы в каждом новом календаре, были неактивны даты выбранные в предыдущем. Думал выбранные даты записывать в массив и делать их 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>

READ ALSO
Стилизация полей с помощью jQuery

Стилизация полей с помощью jQuery

Как сделать что бы при нажатии на кнопку Calculate, если некоторые select со значением 0, они выделялись красной рамкой, а они сейчас выделяются все,...

167
Как добавить только цифры и пробелы в input?

Как добавить только цифры и пробелы в input?

Как ограничить вывод символов и их количество в input + через каждые 4 цифры ставить пробел

242
Как мне продолжить создавать фильтр для продуктов?

Как мне продолжить создавать фильтр для продуктов?

Как мне продолжить создавать фильтр для продуктов? Есть созданы объекты

199
Не корректный jQuery селектор

Не корректный jQuery селектор

Есть вот такая разметка:

207