Bootstrap Datepicker wird nicht richtig aktualisiert

Question

Ich habe eine Tabelle, jede Zeile hat eine Schaltfläche, die eine Bootstrap Popover öffnet, die 2 Bootstrap Datepicker Kontrollen enthält. Sie funktionieren scheinbar gut genug, wenn ich auf den Kalender oder das Eingabefeld klicke, sie öffnen sich, ich kann ein neues Datum wählen und es wird richtig angezeigt.

Das Problem ist, dass, obwohl ich die richtigen Werte im Eingabefeld sehen kann, kann ich nicht auf alle Mittel zugreifen, die ich kenne.

zeigt den ursprünglichen Wert, was es hatte, als ich die Seite geladen habe. Ich habe versucht, den Inspektor des Browsers zu verwenden, um sicherzustellen, dass es keine doppelte ID gibt, und die ursprüngliche Eingabe wurde nicht durch den Datepicker ersetzt, aber scheinbar ist alles in Ordnung.

Die Verwendung der getDate Methode des Datepicker gibt ein ähnliches Ergebnis, es gibt immer den ursprünglichen Wert zurück, egal wie oft ich es ändere.

Wie kann ich den aktuell eingestellten Wert mit jQuery bekommen?

Answer 1

Das Problem war, dass ich die popover auf folgende Weise initialisiert:

<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> 

Was bedeutet, dass der Inhalt des popover aus dem bestehenden, geladen wurde, aber nicht <div> angezeigt. Daher wurde der datepicker auf seltsame Weise angehängt - er wird korrekt angezeigt, aber der ausgewählte Wert wird in das Duplikat divinput geschrieben.

Seit der display:none; waren die Duplikate input s im Inspector nicht sichtbar.

Das Ändern des Tags <div> zu <template> für die popoverCnt löste das Problem sofort.