web-dev-qa-db-fra.com

le composant datetimepicker n'est pas à la bonne place

Je veux utiliser datetimepicker à partir de bootstrap afin de suivre les guides d'installation manuelle sur ce site http://eonasdan.github.io/bootstrap-datetimepicker/ Mais j'ai l'erreur suivante: Erreur non capturée: le composant datetimepicker doit être placé dans un conteneur positionné relatif.

Comment le résoudre?

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

Merci pour vos réponses ... 

twitter-bootstrapbootstrap-datetimepicker
12
dede

Vous avez besoin d'un conteneur autour des contrôles

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

J'ai eu le même problème et ma solution de contournement était d'ajouter une nouvelle classe pour mon contrôle datetime et un sélecteur pour elle avec l'attribut position: relative:

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

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

J'espère que cela t'aides!

10
Andemki

J'ai eu le même problème aussi.

Je l'ai corrigé en ajoutant une position relative à la div d'emballage, comme ceci:

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

Vous utilisez bootstrap2, essayez d’utiliser d’autres datetimepicker prenant en charge bootstrap2, c’est-à-dire http://tarruda.github.io/bootstrap-datetimepicker/ , il semble http://eonasdan.github.io/bootstrap- datetimepicker/ est seulement pour bootstrap3.

1
juliocesar