jQuery DatePicker - Comment mettre en évidence certains jours chaque mois?

Question

J'ai une datequicker jquery qui rend la date actuelle par défaut en tant que calendrier complet. Avant que cela ne soit rendu, je reçois une liste de jours du serveur via l'ajax des jours qui doivent être mis en évidence pour le mois en cours. Le code est la suivante:

$.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"]; 
      } 
     } 
     }); 
    } 

Tout cela est bien, mais je voudrais les dates en surbrillance pour mettre à jour lorsque l'utilisateur clique sur un autre mois. Je peux modifier le code d'initialisation jquery datepicker avec le code suivant:

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

Mais cela ne semble pas fonctionner.

Quelqu'un pourrait-il me montrer ce que je fais mal? Merci! :)

MISE À JOUR - Code du travail

Merci pour l'aide!

J'ai modifié le code de petersendidit comme suit et cela fonctionne maintenant. Va ajouter un peu plus de code pour supprimer les dates en double du tableau des dates, mais à part ça c'est tout bon.

$("#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

Le problème est que vous faites la demande ajax onChangeMonthYear et re-initialiser le datepicker, au moment où votre demande ajax termine le nouveau mois est déjà établi.

Ce que vous pouvez faire est de charger les "dates" pour le mois en cours et le mois précédent et suivant. Puis onChangeMonthYear aller chercher plus de dates et l'ajouter à votre datesArray.

Quelque chose comme ça (non testé):

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