jQuery DatePicker - 如何突出每個月的特定日子？

Question

我有一個jQuery的日期選擇器默認呈現當前日期爲一個完整的日曆。在呈現之前，我從服務器獲取需要爲當月突出顯示的天的ajax日期列表。代碼如下：

$.get("Note/GetActionDates/?orgID=" + orgID + "&month=" + month +"&year=" + year, 
     null, function(result) { 
      RenderCalendar(result); 
     }, "json"); 


function RenderCalendar(dates) { 
     $("#actionCal").datepicker({ dateFormat: 'dd/mm/yy', beforeShowDay: function(thedate) { 
      var theday = thedate.getDate(); 
      if ($.inArray(theday, dates) == -1) { 
       return [true, "", ""]; 
      } 
      else { 
       return [true, "specialDate", "Actions Today"]; 
      } 
     } 
     }); 
    } 

這很好，但我希望當用戶點擊到不同的月份時突出顯示的日期更新。我可以用下面的代碼修改jquery datepicker初始化代碼：

onChangeMonthYear: function(year, month, inst) { 
      //get new array of dates for that month 
      $.get("Note/GetActionDates/?orgID=" + orgID + "&month=" + month + "&year=" + year, 
      null, function(result) { 
       RenderCalendar(result); 
     }, "json"); 
      } 

但是，這似乎並不奏效。

任何人都可以告訴我我做錯了什麼嗎？謝謝！ :)

更新 - 工作代碼

感謝您的幫助！

我已經調整了代碼petersendidit如下，它現在可以工作。要添加更多的代碼來刪除日期數組中的重複日期，但除此之外它的一切都很好。

$("#actionCal").datepicker({ 
      dateFormat: 'dd/mm/yyyy', 
      beforeShowDay: function(thedate) { 
       var theday = thedate.getDate() + "/" + (thedate.getMonth() + 1) + "/" + thedate.getFullYear(); 
       if ($.inArray(theday, actionCalDates) == -1) { 
        return [true, "", ""]; 
       } else { 
        return [true, "specialDate", "Actions Today"]; 
       } 
      }, 
      onChangeMonthYear: function(year, month, inst) { 
       dateCount = 0; 
       getDates(orgID, month, year); 
      } 

     }); 

function getDates(orgID, month, year) { 
     dateCount += 1; 
     if (dateCount < 4) { 
      $.ajax({ 
       url: "Note/GetActionDates/", 
       data: { 
        'orgID': orgID, 
        'month': month, 
        'year': year 
       }, 
       type: "GET", 
       dataType: "json", 
       success: function(result) { 
        actionCalDates = actionCalDates.concat(result); 
        getDates(orgID, month + 1, year); 
        getDates(orgID, month - 1, year); 
       } 
      }); 
     } 
    } 

Answer 1

的問題是，你正在Ajax請求onChangeMonthYear和重新初始化日期選擇器，通過時間的Ajax請求完成新的月份已經繪製。

你可以做的是加載當前月份和上個月和下個月的「日期」。然後onChangeMonthYear獲取更多日期並將其添加到您的datesArray。

像這樣（未經）：

var actionCalDates = array(); 
function getDates(orgID, month, year) { 
    $.ajax({ 
     url:"Note/GetActionDates/", 
     data: { 
      'orgID':orgID, 
      'month':month, 
      'year':year 
     }, 
     type:"GET", 
     dataType: "json", 
     success: function(result) { 
      actionCalDates.concat(result); 
      getDates(orgID, month+1, year); 
      getDates(orgID, month-1, year); 
     } 
    }); 
} 

$("#actionCal").datepicker({ 
    dateFormat: 'dd/mm/yy', 
    beforeShowDay: function(thedate) { 
     var theday = thedate.getDate(); 
     if ($.inArray(theday, actionCalDates) == -1) { 
      return [true, "", ""]; 
     } else { 
      return [true, "specialDate", "Actions Today"]; 
     } 
    }, 
    onChangeMonthYear: function(year, month, inst) { 
     getDates(orgID, month, year); 
    } 
});