I am trying to display a start and end time DateTimePicker within an accordion. When the dates are selected, nothing displays in the input text field. If I remove the "accordion" div, everything works fine. And if I remove the "ul" tag, one of the datePickers show up in the accordion and works, the other is outside of it and does not work.
Does anyone have any ideas on how to fix this?
This is my html code:
<!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>
I figured out what my problem was, it was the order in which the css files were. The smoothness file needed to be first.
needed to be