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