I'm trying to display a datepicker in a popover (using bootstrap and bootstrap-datepicker extension) and having some issues, first I had a problem with displaying the datepicker and found this topic : Datepicker in Popover Won't display ,but now it's displaying behind my popover so it's not fully 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 the 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 ?

I'm trying to display a datepicker in a popover (using bootstrap and bootstrap-datepicker extension) and having some issues, first I had a problem with displaying the datepicker and found this topic : Datepicker in Popover Won't display ,but now it's displaying behind my popover so it's not fully 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 the 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 ?

• javascript
• jquery
• html
• twitter-bootstrap
• datepicker

2 Answers 2

set popup's z-index to a lower value.

.popup { z-index : 900; }

and set datepicker's container z-index to a higher value like in case of jquery ui datepicker set

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

In the css I added:

.datepicker { 
    z-index: 999 !important;
}

Note the "!important". It did not work without this.