Bootstrap datepicker不能在Bootstrap popover裏工作

Question

我有一個Bootstrap Popover，它裏面我想要一個內聯datepicker。然而，datepicker被創建，但沒有一個datepicker事件觸發。

我也參考了Link 1,Link 2和Link 3但他們都沒有爲我工作。

HTML代碼

<div class="container" style="text-align:center;"> 
    <a href="#" data-toggle="popover" data-placement="bottom" id="lnkLaunchDate"> 
    <i class="glyphicon glyphicon-filter" style="color: #000 !important;"></i> 
    </a> 
</div> 

<div id="popover-launchDate" class="hide"> 
    <div> 
    <div id="launchDate" class="grid-filter-datepicker" style="font-size:9px !important"></div> 
    </div> 
</div> 

腳本

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

    }).on('shown.bs.popover', function() { 
     $('#launchDate').datepicker(); 
    }); 

$('#launchDate').datepicker(); 

這裏是我的demo

我缺少的東西？任何幫助將不勝感激。

Answer 1

這是使用引導 HTML簡單jQueryUI的軋光機實施

//POPOVER callback 
 
\t var tmp = $.fn.popover.Constructor.prototype.show; 
 
\t $.fn.popover.Constructor.prototype.show = function() { 
 
\t  tmp.call(this); 
 
\t  if (this.options.callback) { 
 
\t   this.options.callback(); 
 
\t  } 
 
\t } 
 
\t $('.popover-calendar').popover({ 
 
\t  html: true, 
 
\t  placement: 'bottom', 
 
\t  fixclass: 'calendar', 
 
\t  content: function() { 
 
\t   return $($(this).data('contentwrapper')).html(); 
 
\t  }, 
 
\t  callback: function() { 
 
\t   $("#datepicker").datepicker({ 
 

 
\t   }); 
 
\t  } 
 
\t }).on("click", function() { 
 
\t  $(this).next().addClass('calendar-open'); 
 
\t }); 
 

 

 
\t $('body').on('click', function (e) { 
 
\t  $('.popover-calendar').each(function() { 
 
\t   $('.popover-calendar').datepicker(); 
 
      $('.popover-calendar').mousedown(function() { 
 
       $(this).datepicker('hide');  
 
      }); 
 
\t  }); 
 

 
\t });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script> 
 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> 
 
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/> 
 
<div class="box"> 
 
    <button class="btn-filter popover-calendar" data-contentwrapper=".pop-calendar"><span><i class="ico ico-calendar"></i>Today</span> 
 
    </button> 
 
    <div class="pop-content pop-calendar"> 
 
     <div id="datepicker"></div> 
 
    </div> 
 
</div>

你可以風格它按你的設計

Answer 2

改變你的腳本代碼

$('[data-toggle="popover"]').popover({ 

     html: true, 
     title: function() { 
      return ""; 
     }, 
     content: function() { 
      return $("#popover-launchDate").removeClass('hide'); 
     }, 
     callback: function() { 
      $('#launchDate').datepicker(); 
     } 

}) 


$('#launchDate').datepicker();