JS datepicker выделить несколько дат

Question

Как вы выделяете следующие 7 рабочих дней в datepicker, когда вы наведите курсор на 1 дату?

Я хотел бы получить следующие 7 дней с даты, когда я паря, , например. если я нахожусь 2 августа 2016 года - следующие даты будут с 3 августа по 10 августа (7 рабочих дней). Я смог достичь этого, используя импульсы. Тем не менее, я хотел бы выделить эти даты на datepicker, используя событие mouseover. Затем снимите выделение на mouseleave

это то, что я пытался до сих пор:

$('#myDatepicker').datepicker({ 
    // beforeshow and onselect functions 
}).on('mouseover', '.ui-state-default', function() { 
    highlightDates($(this), true); 
}).on('mouseleave', '.ui-state-default', function() { 
    highlightDates($(this), false); 
}); 

function highlightDates(element, add_class) { 
    var addDays = 7; 
    var hoverDate = element.text(); 

    for (var i = 1; i < addDays; i++) { 
      var dates = firstSelect.clone().add(i, 'days').format('YYYY-MM-DD'); 

      // add another day if date is a weekend 
      if (moment(dates).day() == 6) { 
       addDays = addDays + 1; 
      } 

      if (moment(dates).day() == 7) { 
       addDays = addDays + 1; 
      } 

      selectedDays = addDays; 

      rangeDate.push(dates); 
     } 

     if (add_class) { 

      element.addClass('rangeClass'); 
      element.addClass('firstRangeClass'); 

      $('.ui-datepicker-calendar td') 
       .nextAll() 
       .slice(hoverDate, addDays) 
       .find('.ui-state-default') 
       .addClass('rangeClass'); 
     } 
    } 
} 

выше функция работает только правильно, если парил дата 2 августа и не работает должным образом с другими датами.

Answer 1

Вот как я достиг его:

$(document).ready(function() { 
    $('#myDatepicker').datepicker({ 

    }).on('mouseover', '.ui-state-hover', function() { 
     var addDays = 7; 
     var $a = $(this) 
     var $td = $a.closest('td'); 
     var $table = $td.closest('table'); 
     var day = $a.text().trim(); 
     var month = $td.data('month'); 
     var year = $td.data('year'); 
     var dateStr = year + "-" + ("0" + (month + 1)).slice(-2) + "-" + ("0" + day).slice(-2); 
     var theDateObj = $.datepicker.parseDate("yy-mm-dd", dateStr) 
     for (var i = 0; i < addDays; i++) { 
      theDateObj.setDate(theDateObj.getDate() + 1); 
      var theYear = theDateObj.getFullYear(); 
      var theMonth = theDateObj.getMonth(); 
      var theDate = theDateObj.getDate(); 
      var theDay = theDateObj.getDay() 
      if (theDay == 0 || theDay == 6) { // Skip Sunday and Saturday 
       addDays++; 
       continue; 
      } 
      var $theTd = $table.find('td[data-year="'+theYear+'"][data-month="'+theMonth+'"]').filter(function(index) { 
       return $(this).find('a').text().trim() == theDate; 
      }); 
      if ($theTd) { 
       $theTd.addClass('rangeClass'); 
      } 
     } 
    }).on('mouseout', 'tbody', function() { 
     $(this).find('td.rangeClass').removeClass('rangeClass'); 
    }); 
});