mxmissile mxmissile - 4 months ago 22
Javascript Question

Datepicker in Popover Won't display

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?

Answer

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?