I'm using eonasdan datetimepicker
and bootstrap 3. I've got one datetimepicker
set as calendar and the other as time. I'd like to be able to have them side by side on the same line. But I can't quite figure it out without breaking the datetimepicker
. Here is my code:
<form role="form">
<div class="form-group">
<div class="form-group">
<label for="class">Class:</label> <select multiple
class="form-control" size="2">
<option value="1">Class 1</option>
<option value="2">Class 2</option>
</select>
</div>
<div class="form-group">
</div>
<div class="form-group">
<!-- Date Picker -->
<div class="input-group date" id="startDate">
<input type='text' class="form-control" /> <span
class="input-group-addon"><span
class="glyphicon glyphicon-calendar"></span> </span>
</div>
</div>
<div class="form-group">
<!-- Time Picker -->
<div class="input-group date" id="startTime">
<input type='text' class="form-control" /> <span
class="input-group-addon"><span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</div>
</form>
And here is a JSFiddle where the date picker doesn't work but other than that OK. I also can't force the multiple select to only be 2 rows high for some reason?
This seems to be a css issue, which can be overridden. Put both datepicker
and Timepicker
within a div
like
<div class="form-group">
<!-- Date Picker -->
<div class="input-group date " id="startDate">
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<!-- Time Picker -->
<div class="input-group date" id="startTime">
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
Then use CSS:
#startDate, #startTime {
width: 50%;
float: left;
}
Note: use % value for width to keep it as responsive