Popover中的Datepicker将不会显示

mxm*_*ile 7 jquery datepicker twitter-bootstrap

使用Twitter BootstrapBootstrap-datepicker扩展.我无法在弹出窗口中显示日期选择器.

<a href="#" id="add-event-button" class="btn btn-small">Add an Event</a>
Run Code Online (Sandbox Code Playgroud)

$(document).ready(function () {

    $("#add-event-button").popover({
        title: "Add an Event",
        placement: 'bottom',
        content: '<input class="datepicker" type="text" />',
        html: true
    }).click(function (e) {
        e.preventDefault();
    });
});
Run Code Online (Sandbox Code Playgroud)

弹出窗口显示正常,<input class="datepicker" type="text" />弹出窗口上下文显示日期选择器正常.有任何想法吗?

hyd*_*yde 14

尝试使用回调扩展popover函数,因为datepicker无法在加载时添加到非现有元素,请尝试:

var tmp = $.fn.popover.Constructor.prototype.show;
$.fn.popover.Constructor.prototype.show = function () {
  tmp.call(this);
  if (this.options.callback) {
    this.options.callback();
  }
}

$("#add-event-button").popover({ 
  title: "Add an Event",
  placement: 'bottom',
  content: '<input class="datepicker" type="text" />',
  html: true, 
  callback: function() { 
    $('.datepicker').datepicker(); 
  }
}).click(function (e) {
  e.preventDefault();
});
Run Code Online (Sandbox Code Playgroud)

编辑:回调扩展解决方案从这里开始:使用twitter bootstrap创建工具提示/弹出窗口后的回调函数?

  • 你也可以只听''show.bs.popover'事件 (3认同)