datetimepicker component not in right place

问题

I want to use datetimepicker from bootstrap so I follow manual installing guides in this site 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.

来源：https://stackoverflow.com/questions/28293960/datetimepicker-component-not-in-right-place

标签

twitter-bootstrap

bootstrap-datetimepicker