JS datepickerで複数の日付が強調表示される

Question

1つの日付にカーソルを置いたときに、datepickerで次の7営業日をどのように強調表示しますか？

私はホバリングしている日から次の7日間を取得したいと考えていました。 2016年8月2日に出発すると、次の日付は8月3日〜8月10日（7営業日）になります。私はmomentjsを使ってこれを達成することができました。しかし、mouseoverイベントを使用して、日付ピッカーでこれらの日付を強調表示したいと思っていました。

$('#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日で、他の日付では正常に動作しない場合は、上記の機能にのみ正常に動作します。そして、これは私がこれまでにしようとしているものですmouseleave

にハイライトを削除します。ここで

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'); 
    }); 
});