problème lors du clonage jQuery UI datepicker

J'ai un div dans lequel il y a un datepicker. J'utilise quelque chose comme cela pour le clone:

mydiv = $('#someDiv');

//works fine so far
mydiv.find('input.datefield').datepicker();

//clone without the events and insert
newDiv = myDiv.clone(false).insertAfter(myDiv);

//datepicker won't re-init if this class is present
newDiv.find('.hadDatepicker').removeClass('hadDatepicker');

//reinitialize datepicker
newDiv.find('input.datefield').datepicker();

C'est une version allégée de mon code. Il fonctionne et le calendrier s'affiche comme prévu où il est prévu .. mais quand une date est cliqué, la précédente datepicker la valeur est mise à jour.. (celle à partir de laquelle il a été cloné).

J'ai essayé de détruire le (inexistants) instance avant comme ceci:

newDiv.find('input.datefield').datepicker('destroy').datepicker();

Pas de chance ..

J'ai vérifié la façon dont il effectue le suivi des instances et désactivées manuellement les données comme ceci:

newDiv.find('input.datefield').data('datepicker', false).datepicker('destroy').datepicker();

Toujours pas de chance.

Ce que je ne comprends pas, c'est que seule la sélection de la date de comportement est buggé, tout le reste fonctionne comme prévu.

Je ne sais vraiment pas quoi d'autre à vérifier maintenant ..

source d'informationauteur h3.

25

Voici le problème. datepicker crée basé sur l'UUID attributs ID pour les champs de saisie, il se lie lors de l'initialisation. Vous le clonage de ces éléments entraîne plus d'éléments avec le même ID (jQuery n'aime pas) ou un ID différent si votre clone de routine, qu'il gère (ce qui signifie datepicker ne connaissent pas les clones). En d'autres termes, datepicker seulement initialise tous les éléments correspondant à votre sélection au moment de l'appel. il fait moins de sens pour essayer de détruire/désactiver/activer, quand vous pouvez juste envelopper l'init appeler à l'intérieur quelle que soit la fonction que vous utilisez pour créer des clones.

Parce que mon clone fonctions généralement copie de caché des éléments du DOM, plutôt que ceux qui sont visibles, j'ai le luxe de décider si j'ai besoin de lier l'avant ou après le clonage. Donc, faire #templateDiv un élément masqué sur votre page avec l'élément d'ENTRÉE déjà là.
```
mydiv = $('#templateDiv');
mydest = $('#someDiv');

function make_the_donuts() {
    newDiv = myDiv.clone(true).insertAfter(mydest);  
    //attach datepickers by instance rather than by class
    newDiv.find('input.datefield').datepicker();
}
```
et assez bien fait. Clone(vrai) à chaque fois que vous le pouvez, il vous permettra de gagner des maux de tête dans le long terme.
38

Cela fonctionne pour moi avec l'INTERFACE utilisateur de jQuery 1.7.2
```
var mydiv = $('#someDiv');
mydiv.find('input.datefield').datepicker();
var newDiv = mydiv.clone(false).attr("id", "someDiv2").insertAfter(mydiv);
newDiv.find('input.datefield')
  .attr("id", "")
  .removeClass('hasDatepicker')
  .removeData('datepicker')
  .unbind()
  .datepicker();
```
Vérifier http://jsbin.com/ahoqa3/2 pour une démonstration rapide

btw. vous semblez avoir différentes erreurs dans le code de votre question. La classe css est hasDatepicker pas hadDatepicker et à un moment vous avez écrit mydiv et la prochaine fois que la variable est myDiv qui n'est pas le même.
7

Si vous appelez .datepicker('destroy').removeAttr('id') avant le clonage et puis re-init le sélecteur de date cela va fonctionner.

Ce qui semble être un bug avec le détruire puisqu'il est censé retourner l'élément retour à son état d'origine.
3

il suffit de ne
```
$('input.datefield').datepicker("destroy");
```
avant le clonage de la div.
Puis après insérer le clone de lier le datepicker de nouveau
```
$('input.datefield').datepicker();
```
une sorte de " hacky solution, mais il fonctionne parfaitement.
1
```
$('input.datefield').datepicker("destroy");
$('input.datefield').datepicker();
```
il fonctionne bien.
Mais il suffit de faire ceci, datepicker va s'ouvrir sur cloné d'entrée et de fixer la date de l'entrée d'origine (parce qu'ils ont le même ID)

pour résoudre ce problème, vous devez modifier attribut id de l'cloné entrée.
```
dp = < cloned input >
var d = $('input.vDateField');
dp.removeClass('hasDatepicker');
dp.attr('id', dp.attr('id')+d.length);
d.datepicker("destroy");
d.datepicker();
```
et il sera parfait!
1

Voici comment cela a fonctionné pour moi:

Vous devez d'abord supprimer la classe hasDatepickerfrom les éléments clonés,parce que c'est ce qui empêche le datepicker de s'attacher à l'élément spécifique.

Alors tu dois supprimer le id attribut de chacun des éléments clonés d'autre .datepicker() supposons que datepicker est ajouté à cet élément.

Après l'appel .datepicker() sur l'élément cloné.
```
newDiv.find('.classAttributeGivenForDatepicker').each(function() {
   $(this).removeAttr('id').removeClass('hasDatepicker');
   $(this).datepicker({dateFormat: 'dd-mm-yy', minDate: 0, autoclose: true,});
});
```

Que sur la modification de l'ordre?

mydiv = $('#someDiv');

//clone without the events and insert
newDiv = myDiv.clone(false).insertAfter(myDiv);

//datepicker won't re-init if this class is present
//not necessary anymore
//newDiv.find('.hadDatepicker').removeClass('hadDatepicker');

newDiv.find('input.datefield').datepicker();

//datepicker attached as a last step
mydiv.find('input.datefield').datepicker();

Honnêtement, je ne sais pas comment datepicker fonctionne en interne. Mon intuition est qu'il stocke quelque chose en jQuery DOM stockage. Il faut éviter de le copier à tout prix.

(Vous pourriez avoir des affaires à long logique entre ces lignes de code. Le point est d'avoir une sauvegarde de #someDiv avant de mettre un datepicker.)

0

Assurez-vous que vos nouveaux clones datepicker a un autre nom et l'ID que l'original. Si ils ont le même nom, alors le comportement que vous décrivez est normal.

Essayez de modifier que la dernière ligne pour quelque chose comme:
```
newDiv.find('input.datefield').attr('id', 'newDatePicker').attr('name', 'newDatePicker').datepicker();
```

La solution complète qui fonctionne pour moi.

//before
$('input.fecha').datepicker("destroy");
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
//change de input id
$("input.fecha").attr("id", function (arr) {return "fecha" + arr;});
//after
$('input.fecha').datepicker({defaultDate: "+1w",changeMonth: true,numberOfMonths: 1, showOn: "button", buttonImage: "<?php echo base_url() ?>images/calendar.gif", buttonImageOnly: true, showLabel:false, dateFormat:"yy-mm-dd"});

Et le code html de table td.

<td><?php echo form_input(array('name' => 'fecha','id' => 'fecha','class' => 'fecha')); ?></td>

Espère que cela vous aide.

Bonne journée

var dt = new Date();
var month = dt.getMonth();
var day = dt.getDate();
var year = dt.getFullYear()-5;
            $newClone.children().children("#fna"+clickID)
    .attr({
        'id': 'fna1'+newID,
        'name': 'fna'+newID,
        'value': day + '-' + month + '-' + year
    })
    .datepicker("destroy")
    .datepicker({
        firstDay: 1, 
        changeMonth: true, 
        changeYear: true,
        yearRange: 'c-100:c',
        defaultDate: '-1y',
        dateFormat: 'dd-mm-yy' ,
        nextText: "Mes siguiente",
        prevText: "Mes anterior",
        monthNamesShort: ['Ene','Feb','Mar','Abr','May','Jun','Jul','Ago','Sep','Oct','Nov','Dic'],
        dayNamesMin: ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa']
    });

0

Cela pourrait être un peu en retard, mais toutes les suggestions ci-dessus ne fonctionne pas pour moi, je suis venu avec une solution simple pour cela.

D'abord, quelle est l'origine du problème:
JQuery attribuer datepicker à l'id de l'élément. si vous avez choisi l'élément, puis même code peut être cloné. qui jQuery n'aime pas. Vous pourriez vous retrouver avec la réception de nulle erreur de référence ou de la date assignée au premier champ de saisie, peu importe le champ de saisie vous cliquez sur.

Solution:

1) détruire datepicker
2) attribuer de nouveaux identifiants uniques pour tous les champ de saisie
3) attribuer datepicker pour chaque entrée

Assurez-vous que votre entrée est quelque chose comme cela
```
<input type="text" name="ndate[]" id="date1" class="n1datepicker">
```
Avant de cloner, détruire datepicker
```
$('.n1datepicker').datepicker('destroy');
```
Après vous clone, ajouter ces lignes ainsi
```
var i = 0;
$('.n1datepicker').each(function () {
    $(this).attr("id",'date' + i).datepicker();
    i++;
});
```
et la magie se produit

Vous devez vous connecter pour publier un commentaire.