logo标签列表

日期时间选择器组件位置不正确。

twitter-bootstrapbootstrap-datetimepicker
24

我想使用Bootstrap的datetimepicker，所以我按照这个网站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>

感谢您的回复...

你能否发布一个 jsfiddle 来描述你的问题？你使用的是 BS2 还是 BS3？ - Eonasdan
4个回答
17

我也遇到了同样的问题。

我通过为包裹 div 添加 position: relative 属性来解决了它，代码如下：

<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>
这个解决方案对我来说很有效。 - Asis
16

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

我的解决方案是为我的日期时间控件添加一个新的类，并使用 position: relative 属性为它选择器。

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

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

希望这可以帮忙!

14

你需要在控件周围添加一个容器div。

<body>
   <div class="container">
      <div class="row">
          <div class="col-md-6">
              your code snippet here
          </div>
      </div>
   </div>
</body>
2
我已经尝试过了，但是没有什么可以改变的。我以为那个不起作用。 - dede
1
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接