datetimepicker component not in right place

Question

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

can you post a jsfiddle of your issue? Are you using BS2 or BS3? — Eonasdan, Feb 14 '15 at 00:48

score 16 · Answer 1 · answered Apr 11 '15 at 16:53

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!

score 16 · Answer 2 · answered May 22 '15 at 09:53

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>

This solution worked well for me. – Asis Oct 15 '21 at 22:00 — Asis, Oct 15 '21 at 22:00

score 14 · Answer 3 · answered Feb 03 '15 at 08:03

14

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>

answered Feb 03 '15 at 08:03

tire0011

1,048
1
11
22

2

I've tried that, but there was nothing to change. I thougth that is not working. – dede Feb 05 '15 at 02:25

score 1 · Answer 4 · answered Feb 06 '15 at 18:41

1

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.

answered Feb 06 '15 at 18:41

juliocesar

5,706
8
44
63

datetimepicker component not in right place

4 Answers4

Linked