jQuery Datepicker如何突出顯示ui-datepicker-current-day和另一個當前爲止的日期之間的所有日期？

jQuery UI日期選取器窗口小部件自動將一個類ui-state-hover添加到懸停時的日期。但是，我怎樣才能將這個類添加到具有類ui-datepicker-current-day的元素和具有類ui-state-hover的當前懸停元素之間的每個日期？jQuery Datepicker如何突出顯示ui-datepicker-current-day和另一個當前爲止的日期之間的所有日期？

來源

2015-07-20 user1014412

這的確是我們在這裏得到了一個棘手的:)
的問題是，有沒有在datepicker用於afterShow回調。我找到了解決辦法here並做了一些改進：

function initDatePickerMarkup(e) { 
 
    $(e) 
 
     .datepicker('widget').find('td').mouseover(function() { 
 
      currentDate = new Date($(this).attr('data-year')+"/"+(parseInt($(this).attr('data-month'))+1)+"/"+$(this).text()); 
 
      selectedDate = $(e).datepicker('getDate'); 
 
      if (selectedDate === null) { 
 
       selectedDate = new Date(); 
 
      } 
 
      allTds = $(this).parents('table.ui-datepicker-calendar').find('td'); 
 
      allTds.removeClass('ui-datepicker-mouseover1') 
 
      found = false; 
 
      if (currentDate < selectedDate) { 
 
       for (i = 0; i < allTds.length; i++) { 
 
        if (allTds[i] == this) { 
 
         found = true; 
 
        } 
 
        if ($(allTds[i]).hasClass('ui-datepicker-today') || $(allTds[i]).hasClass('ui-datepicker-current-day')) { 
 
         break; 
 
        } 
 
        if (found) { 
 
         $(allTds[i]).addClass('ui-datepicker-mouseover1'); 
 
        } 
 
       } 
 
      } else if (currentDate > selectedDate) { 
 
       for (i = 0; i < allTds.length; i++) { 
 
        if (found) { 
 
         $(allTds[i]).addClass('ui-datepicker-mouseover1'); 
 
        } 
 
        if ($(allTds[i]).hasClass('ui-datepicker-today') || $(allTds[i]).hasClass('ui-datepicker-current-day')) { 
 
         found = true; 
 
        } 
 
        if (allTds[i] == this) { 
 
         break; 
 
        } 
 
       } 
 
      } 
 
     }); 
 
} 
 
$(function() { 
 
    $.datepicker._updateDatepicker_original = $.datepicker._updateDatepicker; 
 
    $.datepicker._updateDatepicker = function(inst) { 
 
     $.datepicker._updateDatepicker_original(inst); 
 
     var afterShow = this._get(inst, 'afterShow'); 
 
     if (afterShow) { 
 
      afterShow.apply((inst.input ? inst.input[0] : null)); // trigger custom callback 
 
     } 
 
    } 
 
    $("#datepicker").datepicker({ 
 
     afterShow: function(e) { 
 
      initDatePickerMarkup(this); 
 
     } 
 
    }); 
 
});

.ui-datepicker-mouseover1 { 
 
    border: 1px solid red !important; 
 
}

<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>datepicker demo</title> 
 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
 
    <script src="//code.jquery.com/jquery-2.1.4.min.js"></script> 
 
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 
</head> 
 
<body> 
 
<input id="datepicker" /> 
 
</body> 
 
</html>

希望它可以幫助

來源

2015-07-21 17:38:56 Dekel

jQuery Datepicker如何突出顯示ui-datepicker-current-day和另一個當前爲止的日期之間的所有日期？

回答

相關問題