Получение двух средств выбора даты и времени в одной строке с бутстрапом 3?

Я использую 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>

И вот JSFiddle, где средство выбора даты не работает, но в остальном все в порядке. Я также не могу заставить множественный выбор быть только 2 строки по какой-то причине?


html datepicker css twitter-bootstrap eonasdan-datetimepicker
person RegDHunter    schedule 28.01.2014    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Похоже, это проблема 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

person Praveen    schedule 28.01.2014
comment
Спасибо, я просто пытался использовать классы формы начальной загрузки, думая, что мне не понадобится прямой CSS. - person RegDHunter; 28.01.2014

arrow_upward
2
arrow_downward

Вы не могли бы проверить. 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-->

Вам не нужен элемент группы из нескольких форм. Если вы используете один из них, вы можете видеть элементы выбора даты рядом.

person caniz    schedule 28.01.2014