Bootstrap Datepicker Displays Over Popover

Question

I am trying to display a datepicker in a popover (using the bootstrap and bootstrap-datepicker extensions) and having some problems, I first had a problem displaying the datepicker and found this topic: Datepicker in Popover will not be displayed , but now it is displayed behind my popover so that it was not completely visible

Here is the HTML code:

<button type="submit" class="btn btn-primary pop_doleance" rel="popover" data-original-title="Ajouter doléance">Ajouter doléance</button> <div style="display: none" class="pop_doleance_content"> <form class="well form-inline form_doleance"> <label for="date">Date : </label> <input id="date" type="text" class="input-medium"> </form> 

And Javascript Code:

 var tmp = $.fn.popover.Constructor.prototype.show; $.fn.popover.Constructor.prototype.show = function (){ tmp.call(this); if (this.options.callback) { this.options.callback(); } } $(function (){ $(".pop_doleance").popover({ placement:'bottom', html : true, content: function(){return $('.pop_doleance_content').html();}, callback: function(){$('#date').datepicker();} }); }); 

Any ideas?

Answer 1

set popup z-index to a lower value.

 .popup { z-index : 900; } 

and set the z-index of the datepicker container to a larger value, for example, in the case of jquery ui datepicker set

 .ui-datepicker-div { z-index: 999; }