使用 bootstrap 3 在同一行获取两个日期时间选择器？

Posted 2023-05-07

【中文标题】使用 bootstrap 3 在同一行获取两个日期时间选择器？

【英文标题】：Getting two date time pickers on the same line with bootstrap 3?

【发布时间】：2014-02-19 12:07:04

【问题描述】：

我正在使用 eonasdan datetimepicker 和 bootstrap 3。我将一个 datetimepicker 设置为日历，另一个设置为时间。我希望能够让它们并排在同一条线上。但是如果不破坏datetimepicker，我就无法弄清楚。这是我的代码：

<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。由于某种原因，我也不能强制多选只有 2 行高？

【参考方案1】：

这似乎是一个 css 问题，可以覆盖。将datepicker 和Timepicker 都放在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>
<!-- 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>

然后使用 CSS：

#startDate, #startTime 
    width: 50%;  
    float: left;

注意：使用 % 值作为宽度以保持响应

JSFiddle

【讨论】：

谢谢，我只是想使用引导表单类，认为我不需要任何直接的 CSS。

【参考方案2】：

请检查一下。 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-->

您不需要多个表单组元素。如果您使用其中之一，您可以并排看到日期选择器元素。