Bootstrap DateTimePicker caché dans la boîte de dialogue JQuery

Question

J'ai un datetimepicker bootstrap (as here) dans une boîte de dialogue JQuery. Toutefois, lorsque le datetimepicker est affiché, il est masqué à l'intérieur de la boîte de dialogue lorsque je souhaite l'afficher en haut de la boîte de dialogue.

Voici ce qu'il ressemble actuellement:

Comme vous pouvez le voir est loin d'être idéale.

J'ai fait des recherches et la seule solution que je semble trouver est d'augmenter l'index z à une grande valeur, mais cela ne semble pas fonctionner. Je l'ai essayé avec de nombreuses classes différentes telles que .datepicker .ui-datepicker .bootstrap-datetimepicker-widget et aussi essayé avec et sans! Important mais rien ne semble fonctionner.

Quelqu'un a-t-il d'autres idées?

Mon code est le suivant:

<div class="mui-textfield"> 
    <input type="date" id="txtDate"/> 
    <label>Date</label> 
</div> 

$('#txtDate').datetimepicker({ 
    format: 'DD-MM-YYYY', 
    keepOpen: false 
}); 

Answer 1

Le z-index ne se révéler le problème pour moi mais je devais aussi mettre overflow: visible à la fois la boîte de dialogue et divs contenu de dialogue afin qu'il soit échappé. Ceci est le css qui a fonctionné pour moi à la fin:

.datepicker 
{ 
    z-index: 99999 !important; 
} 
.ui-dialog { 
    overflow:visible !important; 
} 
.ui-dialog-content { 
    overflow:visible !important; 
}