jQuery UI Datepicker - 我如何選擇，突出顯示特定日期範圍？

Question

我想，當用戶選擇一個日期，突出顯示以下11天。目的是顯示根據選擇的日期選擇的12天範圍。

我見過http://www.filamentgroup.com/的「日期範圍選擇器」，但這並不能真正給我想要的可視化效果，它只是讓用戶根據我的理解選擇一個範圍（從/到）。

任何關於如何實現這一點的建議？

乾杯

Answer 1

可以使用beforeShowDay事件給一個CSS樣式您需要突出的日期。

代碼：

$(document).ready(function(){ 
    var selected = null; 

    $('#datePicker').datepicker({beforeShowDay: function(date) { 
         if (selected != null && date.getTime() > selected.getTime() && 
          (date.getTime() - selected.getTime()) < 12*24*3600*1000) { 
          return [true, "highlighted"]; 
         } 
         return [true, ""]; 
        }}); 

    $("#datePicker").datepicker('option' , 'onSelect', function() { 
      str = $(this).val().toString(); 
      selected=$.datepicker.parseDate('mm/dd/yy', str); 
      console.log(selected); 
      }); 
});