I'm trying to build a form using bootstrap-datetimepicker for selecting dates, and when using in a bootstrap form, the calendar isn't positioned correctly under textbox, nor is the calendar icon just a small icon next to the text box as if I were to just make a simple datetimepicker as in this tutorial. I'm struggling to find a solution for this. If anyone can help, I'd greatly appreciate it!
<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>
<div class="form-group">
<label class="control-label col-sm-2" for="address">Street Address:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="address" placeholder="Enter address">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="city">City:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="city" placeholder="Enter city">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="state">State:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="state" placeholder="Enter state">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="zip">Zip Code:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="zip" placeholder="Enter zip code">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="phone">Phone Number:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="phone" placeholder="Enter phone number">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="email" placeholder="Enter email">
</div>
</div>
</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>
Your nesting of the
input-groupclass is incorrect. You should not mix form groups or grid column classes directly with input groups. Instead, nest the input group inside of the form group or grid-related element. http://getbootstrap.com/components/#input-groups