懸停在jQuery UI日期選取器中突出顯示日期範圍

Question

我在使用jQuery UI Datepicker時遇到了一些麻煩。 當我選擇開始日期和結束日期時（例如2015/12/02 - 2015/12/08），我設法使其突出顯示我的日期範圍 - 然後以綠色高亮顯示日期。

我的問題是現在 - 我可以在選擇結束日期之前高亮一個日期範圍嗎？

下面是一個例子： http://stephencelis.github.io/timeframe/#example_information

當我選擇一個開始日期，它突出的日期範圍，直到我選擇我想要的結束日期。我不確定這是否可以在jQuery UI Datepicker中完成 - 如果沒有，那麼我必須找到其他的東西 - 但這是值得一試的問在這裏:)

這是我的代碼到目前爲止：

$(function() { 

var disabledDate = ["13-12-2015", "14-12-2015", "15-12-2015"]; 

$.datepicker.setDefaults($.datepicker.regional["da"]); 

$("#datepicker").datepicker({ 
     minDate: 0, 
     /* numberOfMonths: [4,2], */ 
     numberOfMonths: 2, 
     firstDay: 1, 
     inline: true, 
     beforeShowDay: function(date) { 

      var string = jQuery.datepicker.formatDate('dd-mm-yy', date); 
      if(disabledDate.indexOf(string) == -1) { 

      } else { 
       return[false, 'disabled-dates']; 
      }; 

      var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#chooseDateFrom").val()); 
      var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#chooseDateTo").val()); 
      return [true, date1 && ((date.getTime() == date1.getTime()) || (date2 && date >= date1 && date <= date2)) ? "selected-dates" : ""]; 

     }, 
     onSelect: function(dateText, inst) { 

      var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#chooseDateFrom").val()); 
      var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#chooseDateTo").val()); 

      var selectedDate = $.datepicker.parseDate($.datepicker._defaults.dateFormat, dateText); 

      if (!date1 || date2) { 

       $("#chooseDateFrom").val(dateText); 
       $("#chooseDateTo").val(""); 

       $(this).datepicker("option", "minDate", dateText); 

      } else if(selectedDate < date1) { 

       $("#chooseDateTo").val($("#chooseDateFrom").val()); 
       $("#chooseDateFrom").val(dateText); 

       $(this).datepicker("option", "minDate", dateText); 

      } else { 

       $("#chooseDateTo").val(dateText); 

       $(this).datepicker("option", "minDate", null); 

      } 
     } 
}); 
}); 

我希望有人能幫助我一點:)我有點困在這裏：/

Answer 1

這將幫助你....

$(document).ready(function(){ 

    var disabledDate = ["13-12-2015", "14-12-2015", "15-12-2015"]; 

    $("#datepicker").datepicker({ 
     minDate: 0, 
     /* numberOfMonths: [4,2], */ 
     numberOfMonths: 2, 
     firstDay: 1, 
     inline: true, 
     beforeShowDay: function(date) { 

      var string = jQuery.datepicker.formatDate('dd-mm-yy', date); 
      if(disabledDate.indexOf(string) == -1) { 

      } else { 
       return[false, 'disabled-dates']; 
      }; 

      var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#chooseDateFrom").val()); 
      var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#chooseDateTo").val()); 
      return [true, date1 && ((date.getTime() == date1.getTime()) || (date2 && date >= date1 && date <= date2)) ? "selected-dates" : ""]; 

     }, 
    onSelect: function(dateText, inst) { 

      var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#chooseDateFrom").val()); 
      var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#chooseDateTo").val()); 

      var selectedDate = $.datepicker.parseDate($.datepicker._defaults.dateFormat, dateText); 

      if (!date1 || date2) { 

       $("#chooseDateFrom").val(dateText); 
       $("#chooseDateTo").val(""); 

       $(this).datepicker("option", "minDate", dateText); 

      } else if(selectedDate < date1) { 

       $("#chooseDateTo").val($("#chooseDateFrom").val()); 
       $("#chooseDateFrom").val(dateText); 

       $(this).datepicker("option", "minDate", dateText); 

      } else { 

       $("#chooseDateTo").val(dateText); 

       $(this).datepicker("option", "minDate", null);     

      } 
      setTimeout("$('a.ui-state-default').attr('onmouseover','setBackColor(this)');",1000); 
     } 
}); 

$('a.ui-state-default').attr('onmouseover','setBackColor(this)');  

}); 
    function setBackColor(object){ 
    var day1=parseInt($(object).html()); 
    var month1=parseInt($(object).parents("td").attr("data-month")); 
    var year1=parseInt($(object).parents("td").attr("data-year")); 
    var date1=new Date(year1,month1, day1); 
//$("#chooseDateFrom").val(date1); 
    if(Date.parse(document.getElementById('chooseDateFrom').value)){ 
    $("a.ui-state-default").each(function(){    
     var obj = this; 
     var day=parseInt($(obj).html()); 
     var month=parseInt($(obj).parents("td").attr("data-month")); 
     var year=parseInt($(obj).parents("td").attr("data-year")); 
     var date=new Date(year,month, day); 
     if(new Date($("#chooseDateFrom").val())<=date && date<=date1){ 
      $(obj).css("background-color","#78F764"); 
     }else{ 
      $(obj).css("background-color",'#e6e6e6'); 
     } 
    }); 
    } 
    }