Zeige Bootstrap Datetime innen popover

Question

ich diesen Code bin mit dem Popup-Feuer:

HTML

<div class="popover-markup"> 
    <a href="#" class="trigger btn btn-default">Track</a> 
    <div class="head hide">Track @item.FullName [@item.Id]</div> 
    <div class="content hide"> 
     <div class="form-group"> 
      <label>Date Called:</label> 
      <input type="text" 
        class="form-control dtp" 
        placeholder="Date called…"> 
     </div> 
     </div> 
    <span class="btn btn-info rr" id="abcd">Submit</span> 
    </div> 
</div> 

Und meine jQuery:

$('.popover-markup>.trigger').popover({ 
     html: true, 
     title: function() { 
      return $(this).parent().find('.head').html(); 
     }, 
     placement: "bottom", 
     content: function() { 
      return $(this).parent().find('.content').html(); 
     } 
    }); 

Meine Absicht ist es Bootstrap Datetime zu verwenden Widget, wenn der Benutzer auf die Eingabe im Popover klickt. Ich habe versucht, die in this SO question angebotene Lösung zu verwenden.

Mein modifizierte jQuery-Code sieht jetzt:

$('.popover-markup>.trigger').popover({ 
     html: true, 
     title: function() { 
      return $(this).parent().find('.head').html(); 
     }, 
     placement: "bottom", 
     content: function() { 
      return $(this).parent().find('.content').html(); 
     } 
    }).on('shown.bs.popover', function() { 
     $('.dtp').datetimepicker(); 
}); 

ich immer noch das Datetime NICHT am unteren Rande des Eingabefeldes zu sehen bekommen, aber am Ende des gesamten popover. Was vermisse ich? Bitte führen.

Answer 1

Sie fehlen einig div Elemente erforderlich,

Depend Ihre Bedürfnisse, mögliche Lösungen, um die Datumsauswahl im unteren Bereich des Eingangs zeigen, die richtigen HTML ....

Wenn mit Symbol

<div class="form-group"> 
    <label>Date Called:</label> 
    <div class="input-group dtp"> 
    <input type="text" class="form-control" placeholder="Date called…"> 
    <span class="input-group-addon"> 
      <span class="glyphicon glyphicon-calendar"></span> 
    </span> 
    </div> 
</div> 

Fiddle Example

Und ohne Symbol

<div class="row"> 
    <div class='col-sm-12'> 
     <label>Date Called:</label> 
     <input type="text" class="form-control dtp" placeholder="Date called…"> 
    </div> 
</div> 

Fiddle Example

Rest des Codes & Ansatz ist alles gut.