在jQuery日期选择器中选择日期和高亮日期选择器

Question

我试图在jQuery Datepicker中突出显示或更改日期范围的CSS。我希望用户能够点击开始日期和结束日期，并且同时突出显示该范围之间的所有日期。我可以在单击时创建该范围内的日期数组，但出于某种原因，我无法向其添加类来更改CSS。

我怎样才能把这个日期数组，然后添加一个CSS类到他们所有的来改变背景/突出显示？

任何帮助将不胜感激！

谢谢

Answer 1

好吧，假设你已经有用户在数组中选择日期。你可以使用'beforeShowDay'选项来指定一个函数，这个函数将在当前可见的月份中遍历每一天，然后你的函数可以将每个日期与你的数组进行比较，并在存在匹配的地方应用一个css类。

因此，例如，初始化像这样的日期选择器...

jQuery(".cal").datepicker({ 
    beforeShowDay: checkDates 
}) 

和功能checkDates（）会是这个样子（假设你的数组称为dateArray ....

function checkDates(theDate){ 
    for(i=0;i<dateArray.length;i++){ 
     if(dateArray[i].valueOf()===thedate.valueOf()){ 
      return [false,"cssClass","title"]; 
     }else return [true,""] 
    } 
}) 

如果日期包含在dateArray中，这将对日期应用类'cssClass'

return语句中的真/假位确定日期是否可选，并且标记'标题'的位是html标题属性（工具提示）

Nb。这比较日期到最接近的毫秒，所以你可能想修改它只是匹配天

Answer 2

我已经成功完成此日期选择器的日期和datepicker为迄今，所以我修改它为一个datepicker 。代码如下：

$(function() { 
       var today = new Date(); 
       var thisYear = (today).getFullYear(); 
       var fromDate = '1/1/2000' //this is the initial from date to set the datepicker range 
       var toDate = '1/7/2000' // this is the initial to date to set the datepicker range 

//... initialize datepicker.... 
     }, 
     beforeShowDay: function(date){ 
      //if the date is in range 
      if (date >= fromDate && date <= toDate) { 
       return [true, 'ui-individual-date', '']; //applies a css class to the range 
      } 
      else { 
       return [true, '', '']; 
       } 
     }, 
     onSelect: function (dateText, obj) { 

    //sets the new range to be loaded on refresh call, assumes last click is the toDate    
     fromDate = toDate; 
     toDate = new Date(dateText); 

     $(".classDp1").datepicker("refresh"); 
     $(".classDp2").datepicker("refresh"); 
     }, 

每次刷新beforeShowDay函数时都会调用新的fromDate和toDate范围。让变量超出函数的范围并对其进行修改可以使CSS中的高亮显示适用于每次点击。