7

Using Twitter Bootstrap and the Bootstrap-datepicker extension. I'm not able to have a datepicker display inside a popover.

<a href="#" id="add-event-button" class="btn btn-small">Add an Event</a>


$(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();
    });
});

The popover displays just fine, and <input class="datepicker" type="text" /> outside of the popover context displays the datepicker fine. Any ideas?

mxmissile
  • 11,464
  • 3
  • 53
  • 79

1 Answers1

14

Try to extend the popover function with a callback, because datepicker cant be added to an non existing element on load, try this:

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

Edit: Callback extension solution from here: Callback function after tooltip / popover is created with twitter bootstrap?

Community
  • 1
  • 1
optimisticupdate
  • 1,689
  • 14
  • 19
  • 1
    Thanks to @naturalethic I also found out that using 'inserted.bs.popover' event works even better as it plays well with the positioning of the popover. it is called as soon as the popover template is added to the dom – katwekibs Jul 30 '16 at 10:43