Aide! Comment rendre les jours activés dans l'interface utilisateur datepicker après le changement du mois?

Question

Dans ma situation:

J'ai obtenu les jours qui veulent être activés par ajax appelé. Quand je change le mois, j'ai lu le fichier xml appelé ajax et j'ai obtenu les jours de ce mois. Comment le faire?

merci beaucoup !!

variable tableau pour tenir les jours:

var $daysWithRecords = new Array() 

fonction pour charger des fichiers xml:

function getDays(year,month){ 

    $.ajax({ 
     type: "GET", 
     url: "users.xml", 
     dataType: "xml", 
     success:function(msg) 
     { 
      initDaysArray($(msg) , year , month); 
     } 

    }); 
} 

fonction

initiale du tableau jour:

function initDaysArray($xml , year , month) 
{ 
    //alert(year+'-'+month); 
    var dateToFind = year+'-'+month; 

    var $myElement = $xml.find('user[id="126"]'); 

    dates = ''; 
    $myElement.find('whDateList[month="'+dateToFind+'"]').find('date').each(function(){ 

     $daysWithRecords.push(dateToFind+$(this).text()); 
     dates += $(this).text() + ' '; 

    }); 


    console.log(dates); 
    console.log($daysWithRecords.length) 
} 

fonction pour rendre la journée disponible dans la variable de tableau:

function checkAvailability(avalableDays){ 

var $return=false; 
var $returnclass ="unavailable"; 

$checkdate = $.datepicker.formatDate('yy-mm-dd', avalableDays); 

for(var i = 0; i < $daysWithRecords.length; i++){ 

     if($daysWithRecords[i] == $checkdate){ 

      $return = true; 
      $returnclass= "available"; 
     } 
    } 

    return [$return,$returnclass]; 
} 

datepicker code partie pour charger et les jours de spectacle [Note: J'utilise le mode en ligne de datepicker]

$('#div').datepicker({ dateFormat: 'yy-mm-dd',defaultDate: '2010-09-01' , 
      onChangeMonthYear: function(year, month, inst) { 
       console.log(year); 
       console.log(month); 
       getDays(year,month); 

      } , 
      beforeShowDay: checkAvailability 

     }); 

et mon fichier xml final:

<?xml version="1.0" encoding="utf-8"?> 
<users> 
    <user id="126"> 
     <name>john</name> 
     <watchHistory> 
      <whMonthRecords month="2010-10"> 
       <whDateList month="2010-10"> 
        <date>01</date> 
        <date>05</date> 
        <date>21</date> 
       </whDateList> 
      </whMonthRecords> 

      <whMonthRecords month="2010-11"> 
       <whDateList month="2010-11"> 
        <date>01</date> 
        <date>05</date> 
        <date>06</date> 
        <date>07</date> 
        <date>08</date> 
        <date>09</date> 
        <date>12</date> 
        <date>13</date> 
        <date>14</date> 
        <date>16</date> 
        <date>18</date> 
        <date>19</date> 
        <date>21</date> 
        <date>22</date> 
        <date>23</date> 
        <date>24</date> 
        <date>25</date> 
        <date>26</date> 
        <date>29</date> 
       </whDateList> 
      </whMonthRecords> 
     </watchHistory> 
    </user> 

</users> 

je vous remercie beaucoup!!

Answer 1

Le problème est le format de date ici, lorsque vous stockez les dates auxquelles ils viennent comme 2010-1001 au lieu de 2010-10-01, donc changer ceci:

$daysWithRecords.push(dateToFind+$(this).text()); 

à ceci:

$daysWithRecords.push(dateToFind+"-"+$(this).text()); 

You can see it working here.

---

est ici une version plus globale optimisée et moins mise en boucle et aucun tableau infiniment plus en plus:

var daysWithRecords = []; 

function initDaysArray($xml , year , month) { 
    var d = year+'-'+month; 
    daysWithRecords = 
    $xml.find('user[id="126"] whDateList[month="'+d+'"] date').map(function() { 
     return d+"-"+$(this).text(); 
    }).get(); 
} 

function checkAvailability(availableDays) { 
    var checkdate = $.datepicker.formatDate('yy-mm-dd', availableDays); 
    for(var i = 0; i < daysWithRecords.length; i++) { 
     if(daysWithRecords[i] == checkdate){ 
      return [true, "available"]; 
     } 
    } 
    return [false, ""]; 
} 

$('#div').datepicker({ 
    dateFormat: 'yy-mm-dd', 
    defaultDate: '2010-09-01', 
    onChangeMonthYear: getDays, 
    beforeShowDay: checkAvailability 
}); 

You can test it here.