Bootstrap datepicker ne met pas à jour correctement

Question

J'ai une table, chaque ligne a un bouton qui ouvre un Bootstrap Popover, contenant 2 Bootstrap Datepicker contrôles. Ils fonctionnent apparemment assez bien quand je clique sur le calendrier ou sur le champ de saisie, ils s'ouvrent, je peux choisir une nouvelle date, et il est correctement affiché. Le problème est que, même si je peux voir les bonnes valeurs dans le champ de saisie, je ne peux pas accéder à ceux-ci par tous les moyens que je connais.

montre la valeur d'origine, ce qu'il avait lorsque j'ai chargé la page. J'ai essayé d'utiliser l'inspecteur du navigateur, pour m'assurer qu'il n'y a pas d'ID en double, et l'entrée d'origine n'a pas été remplacée par le Datepicker, mais apparemment tout est OK. L'utilisation de la méthode getDate de Datepicker donne un résultat similaire, elle renvoie toujours la valeur d'origine, peu importe combien de fois je la change.

Comment puis-je obtenir la valeur actuellement définie avec jQuery?

Answer 1

Le problème était que j'initialisés la popover de la manière suivante:

<div id="popoverCnt" style="display:none;"> 
    ... content ... 
    <div class="input-group date" data-provide="datepicker" id="date_1" data-date-format="yyyy-mm-dd"> 
     <input class="form-control" name="dateval1" id="dateval1" type="dateISO" required placeholder="yyyy-mm-dd"> 
     <div class="input-group-addon"> 
      <span class="glyphicon glyphicon-th"></span> 
     </div> 
    </div> 
    ... more content ... 
</div> 

<a tabindex="1" data-toggle="popover" id="pop1">Open popover</a> 

<script> 
    $("#pop1").popover({ 
     html: true, 
     placement: 'bottom', 
     trigger: 'click', 
     content: function() { 
      return $('popoverCnt').html(); 
     } 
    }); 
</script> 

Ce qui signifie que le contenu du popover a été chargé de l'existant, mais pas affiché <div>. Par conséquent le datepicker a été attaché d'une manière étrange - il affiche correctement mais la valeur sélectionnée est écrite dans le duplicata, invisible divinput.

Depuis le display:none;, les doublons input n'étaient pas visibles dans l'inspecteur.

La modification de la balise <div> en <template> pour le popoverCnt a résolu le problème immédiatement.