jQuery Datepicker - Plusieurs instances et désactiver les dates précédemment sélectionnées?

Question

J'ai une page où l'utilisateur peut sélectionner trois jours de rendez-vous différents en utilisant jQuery UI Datepicker. Lorsque l'utilisateur sélectionne un jour dans le premier champ, j'aimerais que cette date soit bloquée dans les deux autres champs. Actuellement, je désactive également les dimanches, mais je ne peux pas désactiver la désactivation de la date dynamique.

Appointment Time 1<br /> 
<input id="appointment1_date" type="text" name="appointment1_date" value="Select..." /> 

Appointment Time 2<br /> 
<input id="appointment2_date" type="text" name="appointment2_date" value="Select..." /> 

Appointment Time 3<br /> 
<input id="appointment3_date" type="text" name="appointment3_date" value="Select..." /> 


     <script type="text/javascript"> 
     function noSunday(date){ 
      var day = date.getDay(); 
         return [(day > 0), '']; 
      }; 
     </script> 
     <script type="text/javascript"> 
     $(function() { 
      $("#appointment1_date").datepicker(
      { 
       minDate: +2, 
       beforeShowDay: noSunday 
      }); 
     }); 
     $(function() { 
      $("#appointment2_date").datepicker(
      { 
       minDate: +2, 
       beforeShowDay: noSunday 
      }); 
     }); 
     $(function() { 
      $("#appointment3_date").datepicker(
      { 
       minDate: +2, 
       beforeShowDay: noSunday 
      }); 
     }); 
     </script> 

Answer 1

Pour bloquer les dates des autres champs, vous devez obtenir la date et effectuer la comparaison dans votre fonction de gestion. Vu le code que vous avez fourni, ce qui suit devrait fonctionner pour remplacer noSunday:

function noSunday(date) { 
     var day = date.getDay(); 
     return [ 
      (day > 0 && 
      date.valueOf() != $('#appointment1_date').datepicker('getDate').valueOf() 
     ), 
      '' 
     ]; 
}; 

Fondamentalement, non seulement vous voulez vous assurer que day > 0 afin qu'il ne soit pas un dimanche, mais aussi faire en sorte que la date n'est pas égale à la date donnée par appointment1_date. En utilisant .datepicker('getDate') et en comparant son valueOf() avec date est la clé.

Vous voudrez peut-être renommer quelque chose comme noSundayOrSelected ou quelque chose de tout aussi descriptif.

Answer 2

Vous pouvez utiliser la fonction beforeShowDay pour définir des dates désactivées.

Voir here pour une explication complète.