0

Я пытаюсь отображать начальное и конечное время DateTimePicker в пределах аккордеона. Когда даты выбраны, в текстовом поле ввода ничего не отображается. Если я удалю «аккордеонный» div, все будет хорошо. И если я удаляю тег «ul», один из datePickers появляется на аккордеоне и работает, другой находится за его пределами и не работает.Bootstrap Datetimepicker Дата не отображается в Аккордеоне

Есть ли у кого-нибудь идеи, как это исправить?

Это мой HTML-код:

<!DOCTYPE html> 

<html> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>DateTimePicker</title> 

    <script src="lib/jquery/jquery-2.0.2.min.js"></script> 
    <script src="lib/jquery/jquery-ui-1.10.3.min.js"></script> 
    <script src="lib/bootstrap.min.js"></script> 
    <script src="lib/bootstrap-datetimepicker.min.js"></script> 
    <script src="lib/moment.min.js"></script> 

    <link rel="stylesheet" href="lib/bootstrap-combined.min.css"> 
    <link rel="stylesheet" href="lib/bootstrap-datetimepicker.min.css"> 
    <link rel="stylesheet" href="lib/jquery/jquery-ui-themes-1.11.4/themes/smoothness/jquery-ui.css"> 

    <script async type="application/dart" src="datetimepicker.dart"></script> 
    <script async src="packages/browser/dart.js"></script> 

    <link rel="stylesheet" href="datetimepicker.css"> 
    </head> 
    <body> 
    <div id="accordion"> 
     <div> 
     <h3 class="filter-heading">Time Filter</h3> 
      <ul class="filter-list" style="list-style-type: none; padding: 5px;">   
      <div id="datetimepicker" class="input-append"> 
       <div class="well"> 
       <input id="startTimeInput" type="text" class="input" data-format="dd/MM/yyyy hh:mm:ss" /> 
       <span class="add-on"> 
        <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i> 
       </span> 
       </div> 
      </div> 

      <div id="datetimepicker1" class="input-append"> 
       <div class="well"> 
       <input id="endTimeInput" type="text" class="input" data-format="dd/MM/yyyy hh:mm:ss" /> 
       <span class="add-on"> 
        <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i> 
       </span> 
       </div> 
      </div> 
      </ul> 
     </div> 
    </div>  

    <script> 
     $(function() { 
     $('#datetimepicker').datetimepicker({ 
      pick12HourFormat: true 
     }); 
     }); 
    </script> 

    <script> 
     $('#datetimepicker1').datetimepicker({ 
      pick12HourFormat: true 
     }); 
    </script> 
    </body> 
</html> 

<script> 
    $(function() { 
    $("#accordion").accordion({ 
      heightStyle: "content", 
      header: "h3", 
      collapsible: true, 
      active: false}); 
    }); 
</script> 
+0

В любом случае вы можете восстановить свой сценарий в Fiddle или Plunker? – crazymatt

ответ

1

Я понял, что моя проблема была, это порядок, в котором CSS файлы были. Файл гладкости должен быть первым.

<link rel="stylesheet" href="lib/bootstrap-combined.min.css"> 
<link rel="stylesheet" href="lib/bootstrap-datetimepicker.min.css"> 
<link rel="stylesheet" href="lib/jquery/jquery-ui-themes-1.11.4/themes/smoothness/jquery-ui.css"> 

нужно быть

<link rel="stylesheet" href="lib/jquery/jquery-ui-themes-1.11.4/themes/smoothness/jquery-ui.css"> 
<link rel="stylesheet" href="lib/bootstrap-combined.min.css"> 
<link rel="stylesheet" href="lib/bootstrap-datetimepicker.min.css"> 
Смежные вопросы