2010-10-14 14 views
2

J'ai un datpicker qui a seulement quelques dates activées basées sur 3 ensembles de tableaux. onSelect Je récupère la date disponible sur laquelle j'ai cliqué. Maintenant, les choses se compliquent. Le tableau avec les dates disponibles doit être un tableau associatif avec id et date comme 'clé' et 'valeur'. Comment puis-je récupérer l'identifiant associé à la date disponible sur laquelle j'ai cliqué?comment obtenir la clé et la valeur dans un tableau associatif

Voici mon code à ce jour:

function calendar(){ 

    function datePicker(array){ 
     $j("#datepicker").datepicker({ 
      dateFormat: 'dd-mm-yy', 
      minDate: $j.datepicker.parseDate('ddmmyy', array[0]), //this makes the datepicker start at the first available 
      beforeShowDay: function(dateToShow){ 
       if ($j.inArray($j.datepicker.formatDate('ddmmyy', dateToShow),array) !== -1) return [1, 'my-class', 'Available date!']; 
       else return [0, 'no-class', 'Date not available!']; 

      }, 
      //get the selected date 
      onSelect: function(dateText) { 
       var dateAsString = dateText; //the first parameter of this function 

       //var dateAsObject = $j(this).datepicker('getDate'); //the getDate method 
       $j('#getDate').text(dateAsString); 
      } 
     }); 
    } 


    $j('.book-pack a.button').each(function(){ 

     //getting the button id 
     var btnId = $j(this).attr('id'); 

     //arrays with available dates for the 3 packs 
     var datesClub = new Array('08102010', '09102010', '15102010', '16102010', '22102010', '23102010', '29102010', '30102010'); 
     var datesEssential = new Array('08102010', '09102010', '15102010', '16102010', '22102010', '23102010', '29102010', '30102010'); 
     var datesFling = new Array('08102010', '09102010', '15102010', '16102010', '22102010', '23102010', '29102010', '30102010'); 


     $j(this).click(function(){ 

      switch(btnId) 
      { 
       case 'club-class': 
        $j('.window h2.page-title').text('Club Class'); 
        datePicker(datesClub); 
        break; 
       case 'essential': 
        $j('.window h2.page-title').text('The Essential Experience'); 
        datePicker(datesEssential); 
        break; 
       case 'last-fling': 
        $j('.window h2.page-title').text('Last Fling Before the Ring'); 
        datePicker(datesFling); 
        break; 
      } 

      return false; 
     }); 
    }); 
} 

Répondre

0

Essayez quelque chose comme ça (demo):

Ce script crée un tableau de dates à partir du tableau associatif (objet). Il était plus facile de changer la clé: les paires de valeurs de sorte que la date était la clé et la valeur était l'identifiant, mais je pense que cela fait passer l'idée.

function calendar() { 

    function datePicker(pack) { 
     // create array of dates from pack 
     var i, array = []; 
     for (var i in pack) { 
      array.push(i); 
     } 
     $j("#datepicker").datepicker({ 
      dateFormat: 'dd-mm-yy', 
      minDate: $j.datepicker.parseDate('ddmmyy', array[0]), 
      //this makes the datepicker start at the first available 
      beforeShowDay: function(dateToShow) { 
       return ($j.inArray($j.datepicker.formatDate('ddmmyy', dateToShow), array) !== -1) ? [1, 'my-class', 'Available date!'] : [0, 'no-class', 'Date not available!']; 
      }, 
      //get the selected date 
      onSelect: function(dateText, inst) { 
       var dateAsString = dateText, 
        //the first parameter of this function 
        dateCompressed = (dateText).replace(/-/g, ''); // dd-mm-yyyy -> ddmmyyyy 
       $j('#getDate').text(dateAsString); 
       $j('#getId').text(pack[dateCompressed]); 
      } 

     }); 
    } 


    $j('.book-pack a.button').each(function() { 
     //getting the button id 
     var btnId = $j(this).attr('id'); 
     //arrays with available dates for the 3 packs 
     var datesClub = { '08102010' : 'id1', '09102010' : 'id2', '15102010' : 'id3', '16102010' : 'id4', '22102010' : 'id5', '23102010' : 'id6', '29102010' : 'id7', '30102010' : 'id8' }; 
     var datesEssential = { '08102010' : 'id1', '09102010' : 'id2', '15102010' : 'id3', '16102010' : 'id4', '22102010' : 'id5', '23102010' : 'id6', '29102010' : 'id7', '30102010' : 'id8' }; 
     var datesFling = { '08102010' : 'id1', '09102010' : 'id2', '15102010' : 'id3', '16102010' : 'id4', '22102010' : 'id5', '23102010' : 'id6', '29102010' : 'id7', '30102010' : 'id8' }; 

     $j(this).click(function() { 
      switch (btnId) { 
      case 'club-class': 
       $j('.window h2.page-title').text('Club Class'); 
       datePicker(datesClub); 
       break; 
      case 'essential': 
       $j('.window h2.page-title').text('The Essential Experience'); 
       datePicker(datesEssential); 
       break; 
      case 'last-fling': 
       $j('.window h2.page-title').text('Last Fling Before the Ring'); 
       datePicker(datesFling); 
       break; 
      } 
      return false; 
     }); 
    }); 
}