web-dev-qa-db-ja.com

datetimepickerコンポーネントが適切な場所にありません

bootstrapなので、このサイトの手動インストールガイドに従います bootstrap-datetimepicker からdatetimepickerを使用したいのですが、次のエラーが発生しました：

キャッチされないエラー：datetimepickerコンポーネントは、相対配置されたコンテナ内に配置する必要があります。

それを解決するには？

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

ご回答ありがとうございます...

twitter-bootstrapbootstrap-datetimepicker
16
dede

コントロールの周りにコンテナーdivが必要です

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

私は同じ問題を抱えていて、私の回避策はposition: relative属性を使用して、日時コントロールの新しいクラスとそのセレクターを追加することでした：

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

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

お役に立てれば！

11
Andemki

私も同じ問題を抱えていました。

次のように、ラッピングdivに相対的な位置を追加して修正しました。

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

あなたはbootstrap2を使用しています、bootstrap2をサポートしている他のdatetimepickerを使用してみてください http://tarruda.github.io/bootstrap-datetimepicker/ 、それは http：//eonasdan.github .io/bootstrap-datetimepicker / はbootstrap3専用です。

1
juliocesar