Question

我想在bootstrap中使用datetimepicker，因此我按照此网站http://eonasdan.github.io/bootstrap-datetimepicker/中的手动安装指南进行操作但我有以下错误：未捕获错误：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>

感谢您的回复......

Answer 1

你需要一个围绕控件的容器div

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

Answer 2

我遇到了同样的问题，我的解决方法是使用position: relative属性为我的日期时间控件和选择器添加新类：

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

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

希望这有帮助！

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

Answer 4

您正在使用bootstrap2，尝试使用其他具有bootstrap2支持的datetimepicker，即http://tarruda.github.io/bootstrap-datetimepicker/，似乎http://eonasdan.github.io/bootstrap-datetimepicker/仅适用于bootstrap3。

datetimepicker组件不在正确的位置

4 个答案: