ブートストラップポップオーバーでDatepickerが表示されない

Question

シンプルなBootstrap pophoverを使用していますが、このpophoverの下にDatepickerを挿入すると問題が発生し、Datepickerは表示されません。しかし、通常のDatepickerは私がpophoverの下にそれを挿入しなければ仕事です。

<div id="popover-content" class="hide"> 
       <form class="form-inline" role="form"> 
        <div class="clearfix "> 
         <div class="checkbox"> 
          <label> 
           <input id="asap" type="checkbox"> ASAP 
          </label> 
         </div> 
        </div> 
        <div class="clearfix hideevent"> 
         <div class="form-group"> 
          <div class="checkbox"> 
           <label> 
            <input name="morning" type="radio"> Morning 
           </label> 
          </div> 
          <div class="checkbox"> 
           <label> 
            <input name="morning" type="radio"> Evening 
           </label> 
          </div> 
         </div> 
         <input class="form-control" id="date" name="date" placeholder="MM/DD/YYYY" type="text"/> 
        </div> 
       </form> 
      </div> 

$("[data-toggle=popover]").popover({ 
      html: true, 
      content: function() { 
       return $('#popover-content').html(); 
      } 
     }); 

$('#date').each(function() { 
      $(this).datepicker('clearDates'); 
     }); 

Answer 1

あなたが怒鳴るスクリプト記述その後data-content=''属性に

<input type="text" data-content=' popover html paste here ' readonly id="PopS" data-placement="bottom" data-toggle="popover" data-html="true" placeholder="Quando" class="form-control" data-container="body"/>

をあなたのポップオーバーのHTMLコンテンツを使用することができます

<script> 
$("#PopS").popover({ 
    html: true 
}).on('shown.bs.popover', function() { 
    $('#date').datepicker({ 
    format: 'dd/mm/yyyy', 
    }); 
}); 
</script> 

注：この<div id="popover-content" class="hide">に class="hide"

を削除

Answer 2

$('[data-toggle=popover]').on('show.bs.popover', function() { 
    $('#date').datepicker(); 
}) 

これを試してみてください。