Компонент datetimepicker не в нужном месте

Я хочу использовать datetimepicker из начальной загрузки, поэтому я следую инструкциям по установке вручную на этом сайте bootstrap-datetimepicker но у меня есть следующая ошибка:

Uncaught Error: компонент datetimepicker должен быть помещен в контейнер с относительным расположением.

Как это решить?

<div class="control-group form-horizontal ">
  <label class="control-label">Date</label>
  <div class="controls">
    <input name="datetime" id="datetimepicker4" type="text" class="span4" value="<?php echo $datetime; ?>">
  </div>
</div>

<script type="text/javascript">
  $(function() {
    $('#datetimepicker4').datetimepicker();
  });
</script>

Спасибо за ваши ответы...

ОТВЕТЫ

Ответ 1

Вам нужен контейнер div вокруг элементов управления

<body>
   <div class="container">
      <div class="row">
          <div class="col-md-6">
              your code snippet here
          </div>
      </div>
   </div>
</body>

Ответ 2

У меня была одна и та же проблема, и моим обходным путем был добавлен новый класс для моего элемента управления datetime и селектора для него с атрибутом position: relative:

<style>
  .editor-datetime {
      position: relative;
   }
</style>

<div class="editor-datetime">
  @Html.EditorFor(i => i.StartDate)
</div>

Надеюсь, это поможет!

Ответ 3

У меня тоже была проблема.

Я исправил его, добавив позицию относительно оберточного div, например:

<div class="control-group form-horizontal ">
       <label class="control-label">Date</label>
              <div class="controls" style="position: relative">
                 <input name="datetime" id="datetimepicker4" type="text"  class="span4" value="<?php echo $datetime; ?>" >
                                </div>
                            </div>
<script type="text/javascript">
        $(function () { 
            $('#datetimepicker4').datetimepicker();
        });
    </script>