-->

datetimepicker component not in right place

2019-06-15 07:18发布

问题:

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

回答1:

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>


回答2:

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!



回答3:

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>


回答4:

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.