JS datepicker markieren Sie mehrere Daten

Question

Wie markieren Sie die nächsten 7 Werktage in einem Datepicker, wenn Sie den Mauszeiger auf 1 Datum bewegen?

Ich wollte die nächsten 7 Tage ab dem Datum, ich schwebe, z. wenn ich am 2. August 2016 schwebe - die nächsten Termine sind vom 3. August - 10. August (7 Werktage). Ich konnte dies mit Momentjs erreichen. Allerdings wollte ich diese Daten auf dem Datepicker unter dem mouseover Event hervorheben können. Dann entfernen Sie die Markierung auf mouseleave

das ist, was ich versucht habe bisher:

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

Die obige Funktion funktioniert nur, wenn die hovered- Datum 2. August ist und funktioniert nicht richtig mit einem anderen Termin.

Answer 1

Hier ist, wie ich es erreicht:

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