JS datepicker突出顯示多個日期

Question

當您在1日期懸停時，您如何突出顯示日期選擇器中接下來的7個工作日？

我想從我徘徊的日期開始的下一個7天，例如 如果我在2016年8月2日懸停 - 下個日期將從8月3日到8月10日（7個工作日）。我能夠通過使用momentjs來實現這一點。不過，我希望能夠使用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'); 
     } 
    } 
} 

上述功能只有正常工作，如果懸停的日期是8月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'); 
    }); 
});