datetimepicker component not in right place

I want to use datetimepicker from bootstrap so I follow manual installing guides in this site http://eonasdan.github.io/bootstrap-datetimepicker/ But I've got following error: Uncaught Error: datetimepicker component should be placed within a relative positioned container.

How to solve it?

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

Thank your for your responses...

标签： twitter-bootstrap bootstrap-datetimepicker

4条回答

唯我独甜

2楼-- · 2019-06-15 07:55

You are using bootstrap2, try to use other datetimepicker that have bootstrap2 support i.e. http://tarruda.github.io/bootstrap-datetimepicker/, it seems http://eonasdan.github.io/bootstrap-datetimepicker/ is only for bootstrap3.

0人赞添加讨论(0) 举报

戒情不戒烟

3楼-- · 2019-06-15 07:57

I had the same issue and my workaround was add new class for my datetime control and selector for it with position: relative attribute:

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

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

Hope this helps!

0人赞添加讨论(0) 举报

beautiful°

4楼-- · 2019-06-15 07:58

I had the same issue too.

I fixed it by adding a position relative to the wrapping div, like so:

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

0人赞添加讨论(0) 举报

兄弟一词,经得起流年.

5楼-- · 2019-06-15 08:01

You need a container div around of the controls

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

0人赞添加讨论(0) 举报

datetimepicker component not in right place

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间