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

Question

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?

Answer 1

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

Answer 2

Could you please check. http://jsfiddle.net/6FcBT/2/

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

    <!-- 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>
    </div>
  </div>
</div><!--end form-group-->

You don't need multiple form group element. If you use one of them you can see the datepicker elements side by side.