Я пытаюсь отображать начальное и конечное время 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>
В любом случае вы можете восстановить свой сценарий в Fiddle или Plunker? – crazymatt