Создание правильного цикла в событии

106

21 сентября 2017, 17:41

Использую в проекте плагин air-datepicker.
В нем есть собственные описанные события.

Есть массив дат, которые мы должны заблокировать, пытаюсь сделать это через функцию рисования ячеек при открытии календаря, запуская в нем цикл, но при моем цикле событие обрабатывает только первый элемент массива, до других не доходит.
Как я понимаю из-за return.

Подскажите, как правильно прописать цикл, дабы блокировались все дни?

let LastResult = $('.Datex').length; 
let disabledDays = [0, 6]; 
var arr = []; 
$('#Date').datepicker({ //образаемся к календарю 
  onRenderCell: function(date, cellType) { //вызываем функцию отрисовки ячеек 
    // запускаем цикл  
    for (i = 0; i < LastResult; ++i) { 
      arr[i] = $('.Datex').eq(i).text(); 
      // получаем из элемента массива день 
      var test = arr[i].split('.'); 
      d = +test[0]; 
      m = +test[1] - 1; 
      var y = +test[2]; 
       
      // если рисуется день и он равен D то мы его блокируем 
      if (cellType == 'day' && date.getDate() == d) { 
        return { 
          disabled: true 
        } 
      } else 
        // блокируем выходные 
        if (cellType == 'day') { 
          var day = date.getDay(), 
            isDisabled = disabledDays.indexOf(day) != -1; 
          return { 
            disabled: isDisabled 
          } 
        } 
    } 
  } 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<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/air-datepicker/2.2.3/js/datepicker.js"></script> 
 
<input id="Date" type="text" name="calendar" class="datepicker-here" data-range="true" data-toggleselected="false" data-multiple-dates-separator=" - " placeholder="нажмите для выбора"> 
 
<div id="InfoСoincidence" class="OrderPanel panel panel-default"> 
  <div class="Datex">21.11.2017</div> 
  <div class="Datex">22.11.2017</div> 
  <div class="Datex">23.11.2017</div> 
  <div class="Datex">23.09.2017</div> 
  <div class="Datex">2.09.2017</div> 
  <div class="Datex">13.09.2017</div> 
  <div class="Datex">14.09.2017</div> 
</div>

https://codepen.io/Gic0/pen/gGrVbb

Answer 1

Проблема не в return как вы думаете, а в том что переменная d всегда у вас равна 21.

Лучше перед вызовом datepicker определить массив дней/дат, которые недоступны, а уже внутри функции onRenderCell проверять, есть ли в этом массиве значение или нет.

Answer 2

Нужно один раз преобразовать даты в приемлемый для лёгкой проверки формат и при рендере просто проверять наличие:

// Преобразуем даты в объект вида: {2017: {9: [2, 13, ...]}} 
let disabledDays = Array.from($('.Datex')).reduce((acc, e) => { 
  let date = new Date(e.innerHTML.split('.').reverse().join('-')); 
  let [year, month, day] = [date.getFullYear(), date.getMonth() + 1, date.getDate()]; 
   
  if(!(year in acc)) 
    acc[year] = {}; 
  if(!(month in acc[year])) 
    acc[year][month] = []; 
     
  acc[year][month].push(day); 
   
  return acc; 
}, {}); 
 
$('#Date').datepicker({ 
  onRenderCell: function(date, cellType) { 
    if(cellType !== 'day') return; // Не работаем с чем-либо кроме дней 
    let [year, month, day] = [date.getFullYear(), date.getMonth() + 1, date.getDate()]; // Отрисовываемые данные 
     
    if((year in disabledDays) && (month in disabledDays[year]) && (disabledDays[year][month].includes(day))){ // Простые условия проверки 
      return { 
        disabled: true 
      }; 
    } 
  } 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<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/air-datepicker/2.2.3/js/datepicker.js"></script> 
 
<input id="Date" type="text" name="calendar" class="datepicker-here" data-range="true" data-toggleselected="false" data-multiple-dates-separator=" - " placeholder="нажмите для выбора"> 
 
<div id="InfoСoincidence" class="OrderPanel panel panel-default"> 
  <div class="Datex">21.11.2017</div> 
  <div class="Datex">22.11.2017</div> 
  <div class="Datex">23.11.2017</div> 
  <div class="Datex">23.09.2017</div> 
  <div class="Datex">2.09.2017</div> 
  <div class="Datex">13.09.2017</div> 
  <div class="Datex">14.09.2017</div> 
</div>