DateTimpicker не отображается правильно в jquery ui layout

Question

Как я могу заставить datetimepicker правильно работать в макете jquery ui. datetimepicker не отображается, когда я нажимаю на текстовое поле, которое находится позади на южной панели.

см fiddle

<div class="ui-layout-north">North</div> 
<div class="ui-layout-south"> 
    <div class="container"> 
    <div class="row"> 
     <div class='col-sm-6'> 
      <div class="form-group"> 
       <div class='input-group date' id='datetimepicker1'> 
        <input type='text' class="form-control" /> 
        <span class="input-group-addon"> 
         <span class="glyphicon glyphicon-calendar"></span> 
        </span> 
       </div> 
      </div> 
     </div> 

    </div> 
</div> 


$(function(){ 
$('body').layout({ applyDemoStyles: true }); 
     $('#datetimepicker1').datetimepicker(); 
}); 

Спасибо заранее.

Answer 1

moment.js отсутствовал в вашем коде. Я изменил его & теперь его работая отлично. Here - это обновленная скрипка.

$(function(){ 
$('body').layout({ applyDemoStyles: true }); 
     $('#datetimepicker1').datetimepicker(); 
}); 

Вам необходимо будет обновить свой код, чтобы отобразить datetimepicker правильно. Для более форматирования вы можете обратиться к https://eonasdan.github.io/bootstrap-datetimepicker/Options/.