나는 팝업 화재로이 코드를 사용하고 팝 오버

Question

내부 부트 스트랩을 DateTimePicker 표시 :

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> 

그리고 내 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(); 
     } 
    }); 

내 의도는 부트 스트랩을 DateTimePicker를 사용하는 것입니다 사용자가 Popover 내부의 입력을 클릭 할 때 위젯. 나는 this SO question에서 제공되는 솔루션을 사용해 보았습니다.

내 수정 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(); 
     } 
    }).on('shown.bs.popover', function() { 
     $('.dtp').datetimepicker(); 
}); 

난 아직도하지 입력 필드의 맨 아래에 있지만 전체 팝 오버의 하단에있는 DateTimePicker를 볼 수 있습니다. 나는 무엇을 놓치고 있습니까? 안내해주십시오. 당신은 어떤 div 요소를 필요 누락

Answer 1

,

아이콘으로

하면 .... 요구 사항이 가능한 솔루션은 입력 아래, 올바른 HTML에서 날짜 선택기를 보여 의존

<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

아이콘없이

나머지 코드 & 접근

<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

모두 좋다.