Getting two date time pickers on the same line with bootstrap 3?
RegDHunter
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?
Praveen
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
JSFiddle
Collected from the Internet
Please contact [email protected] to delete if infringement.
edited at
- Prev: What is wrong with opening and closing a stream like this?
- Next: Run once when AngularJS controller loads
Related
Related Related
- 1
Two date pickers in same activity android
- 2
Catch 22 situation for CSS z-index when using two Bootstrap date time pickers
- 3
Catch 22 situation for CSS z-index when using two Bootstrap date time pickers
- 4
Bootstrap 3: Two forms on the same line
- 5
Bootstrap3 two dropdowns on the same line
- 6
Get date and time on the same line
- 7
Titanium 6.0.3 GA - Date & Time pickers problems
- 8
Counting Weeks between two Jquery Date Pickers
- 9
Python 3 getting unique result base in date/time when multiple entry in the same date but different times
- 10
Bootstrap getting dropdown on same line as buttons
- 11
Two Rails servers with the same Time.zone, same server timezone, but getting different results from Date.to_time
- 12
Getting time zone date command line linux
- 13
Two fields on the same line in a vertical form with bootstrap
- 14
Check if two time objects are on the same Date in Go
- 15
Bootstrap columns of 3 + 9 not on same line
- 16
Bootstrap columns of 3 + 9 not on same line
- 17
Use two bootstrap country pickers on one page - do not get populated
- 18
Error With Bootstrap 3 Date/Time Picker
- 19
How do I subtract two date pickers in Android?
- 20
BootStrap 3 Two Nav headers on the same row
- 21
BootStrap 3 Two Nav headers on the same row
- 22
Bootstrap 3 datetimepicker linked pickers adds 1 minute
- 23
getting a string between two strings not in the same line, regex
- 24
Why am getting two ajax calls at same time?
- 25
How to force two element alignment in the same line bootstrap model
- 26
Date range pickers in angularjs
- 27
How to determine two date is same day at local time in nodejs?
- 28
C3 js line chart getting error for date
- 29
Getting a time date range
Comments