Getting two date time pickers on the same line with bootstrap 3?

css, datepicker, eonasdan-datetimepicker, html, twitter-bootstrap

Solution

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

Problem

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">  <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">  <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?

Original source