在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中的高亮顯示適用於每次點擊。