Problèmes jQuery avec différents datpickers sur une page

Question

Je construis un planificateur qui utilisera la fonctionnalité datepicker dans plusieurs endroits différents. Il y a un prompteur général qui contrôle le calendrier, puis dans différentes boîtes de dialogue, je veux avoir un bouton pour ouvrir un sélecteur de date juste pour sélectionner une date pour un champ (par exemple la date de début d'un événement).

Le datpicker général est lié à un div (c'est-à-dire qu'il s'agit d'un sélecteur de date en ligne), tandis que les autres sont liés à des entrées. Il y a une bonne raison pour laquelle j'ai un datpicker lié à un div: il faut que je puisse faire glisser des éléments sur lui en utilisant draggable et droppable, ce qui s'avère impossible en utilisant un prompteur 'popup'.

Maintenant, j'ai vu sur post chez ExpertsExchange qu'une fois qu'une instance de datepicker est initialisée, ses options s'appliqueront automatiquement à toute autre instance à moins que vous ne les spécifiiez pour les instances suivantes. Mais dans mon cas, tout semble s'emmêler: les événements spécifiés pour un élément se déclencheront sur l'autre, le sélecteur de date en ligne apparaîtra après la fermeture d'un popup pop-up, etc.

Je n'inclut pas le vrai code car il y a Je voudrais d'abord savoir si je manque un principe général, comme "Datepicker ne permet pas une option d'avoir des valeurs différentes pour différentes instances parce que ..." ou "Ne pas mélanger inline et popup datepickers parce que ... "ou une telle chose.

Mais mon idée générale est codespeak:

$('div#mainDatePicker').datepicker({ 
    //options for main (inline) datepicker, doubling as defaults for any subsequent datepickers 
}) 

$('input#selectStartDate').datepicker({ 
    //specific options for this datepicker, where different from the main one 
}) 

Merci pour toute aide!

Wytze

Answer 1

J'ai eu cette question une fois (pour le format de date). Peut-être vous pouvez lier sur un clic comme:

$('div#mainDatePicker').click(function(){ 
    $(this).datepicker({ 
     //options for main (inline) datepicker, doubling as defaults for any subsequent datepickers 
    }) 
}) 

$('input#selectStartDate').click(function(){ 
    $(this).datepicker({ 
     //specific options for this datepicker, where different from the main one datepickers 
    }) 
}) 

Answer 2

Je fait un travail avec plusieurs datepickers sur la même page et a eu des résultats inattendus jusqu'à ce que je pris conscience que chaque datepicker a besoin d'avoir un identifiant unique. Par exemple, supposons que vous souhaitiez lier un sélecteur de date à deux boutons d'entrée similaires. Ce qui suit des problèmes:

<input type="text" class="myCustomDatePicker"> 
<input type="text" class="myCustomDatePicker"> 

Par exemple, si vous définissez une date en utilisant la deuxième DatePicker la date sélectionnée apparaît dans le champ de saisie de la première zone de saisie.

Au lieu de cela, la fixation d'un id assurera le fonctionnement de chaque datepicker indépendamment:

<input type="text" class="myCustomDatePicker" id="dp1"> 
<input type="text" class="myCustomDatePicker" id="dp2"> 

Je ne sais pas si cela aide, mais juste quelque chose à vérifier que je suppose que lorsque vous utilisez datepickers plusieurs sur une même page

Answer 3

jQuery Le widget UI Datepicker référence l'ID de l'attribut html auquel vous l'attachez. Donc, pour utiliser plus d'un datepicker vous devez vous assurer que les identifiants de chaque datepicker sont différents.

So you want to end up with the following HTML: 

<input id="form-date-1" type="text" /> 
<input id="form-date-2" type="text" /> 
<script type="text/javascript"> 
    $("#form-date-1").datepicker(); 
    $("#form-date-2").datepicker(); 
</script> 

vérifier cet article: http://mike-abner.posterous.com/multiple-jquery-ui-datepickers-on-the-same-pa

Answer 4

Si vous utilisez $('.someclass).datepicker(); et $('.anotherclass).datepicker() cela fonctionnera.

Si vous utilisez:

$('.someclass').each(function() { 
    $(this).datepicker(); 
}); 

cela ne fonctionnera pas.

Il arrivera ce qu'Alex P a dit.

Pour résoudre le problème, vous devez utiliser des identifiants. Il n'y a pas d'autre moyen.

Peu importe l'identifiant que vous utilisez. Vous pouvez utiliser des identifiants uniques générés au hasard. Voici un exemple:

$('.someclass').each(function() { 
    $('#' + $(this).attr('id')).datepicker(); 
});