Struggling with aligning the calendar correctly under a textbox while using bootstrap-datetimepicker in a form? The positioning seems off, and the calendar icon isn't where it should be. It's not behaving like a simple datetimepicker as shown in this tutorial. Any assistance on resolving this issue would be greatly appreciated!
<div class="container-fluid">
<div class="page-header">
<h1>Rental Car Agreement</h1>
<img src="../chris_cole">
</div>
<section>
<form class="form-horizontal" role="form">
<fieldset>
<legend>Personal Information:</legend>
<div class="form-group">
<label class="control-label col-sm-2" for="firstName">First Name:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="firstName" placeholder="Enter first name">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="lastName">Last Name:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="lastName" placeholder="Enter last name">
</div>
</div>
... additional form fields ...
</fieldset>
<fieldset>
<legend>Other Information:</legend>
<div class="form-group input-group date" id="datetimepicker1">
<label class="control-label col-sm-2" for="startDate">Start Date:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="startDate">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
</fieldset>
</form>
</section>
</div>