2017-10-19 61 views
1

我使用一個簡單的引導pophover,但我面臨的問題,當我插入Datepicker這pophover下,然後Datepicker它不顯示。但是,正常Datepicker是工作,如果我不插入pophover下。 enter image description hereDatepicker不顯示引導彈窗

<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'); 
     }); 

回答

2

你可以用你的酥料餅的HTML內容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"/>

然後寫劇本波紋管:

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

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

試試這個。