DateTimePickerのウィジェット奇妙な配置は

Question

私はより良いトラブルシューティングのためのコードスニペットを含めましたが、それ自体が問題を抱えて

実際の問題は、しかし、下の画像を参照してください、あなたはDateTimePickerのウィジェットは、テーブルの後ろにあることに気づきます。どのようにすべての前にそれを作る？

コードのDateTimePickerが奇妙な演技されて

スニペット。

コードスニペットを参照してください。適切なエラーメッセージが表示されないエラーがあります。私はすべての適切なCDNを含めました。

さらに、datetimepickerウィジェットは表示されますが、結果ボックスの下部に配置されています。

$('.datetimepicker').datetimepicker({ 
 
    format : "DD-MM-YYYY hh:mm" 
 
    });

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script> 
 

 
<label for="datefrom">Date From</label> 
 
<input id="datefrom" name="datefrom" type="text" class="datetimepicker"/> 
 
       
 
<table id="myTable" class="table table-striped table-bordered table-hover" cellspacing="0" width="100%"> 
 
    <thead> 
 
     <tr> 
 
     <th>Date</th> 
 
     <th>Description</th> 
 
     <th>Receipt No/Ref No</th> 
 
     <th>Payment Method</th> 
 
     <th>Amount</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>01-10-2017</td> 
 
     <td>DOB Balance</td> 
 
     <td>N/A</td> 
 
     <td>Cash</td> 
 
     <td>$1000</td> 
 
    </tr> 
 
    <tr> 
 
     <td>01-10-2017</td> 
 
     <td>DOB Balance</td> 
 
     <td>N/A</td> 
 
     <td>Cash</td> 
 
     <td>$1000</td> 
 
    </tr> 
 
    <tr> 
 
     <td>01-10-2017</td> 
 
     <td>DOB Balance</td> 
 
     <td>N/A</td> 
 
     <td>Cheque</td> 
 
     <td>$1000</td> 
 
    </tr> 
 
    <tr> 
 
     <td>01-10-2017</td> 
 
     <td>DOB Balance</td> 
 
     <td>N/A</td> 
 
     <td>TT</td> 
 
     <td>$1000</td> 
 
    </tr> 
 
    </tbody> 
 
    </table>

Answer 1

これを試してみてください。それが答えを受け入れるのに役立ちます。あなたは、ブートストラップ日付ピッカーを使用していた

$('.datetimepicker').datetimepicker({ 
 
    format : "DD-MM-YYYY hh:mm" 
 
    });

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script> 
 

 
<div style="position: relative"> 
 
    <label for="datefrom">Date From</label> 
 
    <input id="datefrom" name="datefrom" type="text" class="datetimepicker"/> 
 
</div> 
 

 
       
 
<table id="myTable" class="table table-striped table-bordered table-hover" cellspacing="0" width="100%"> 
 
    <thead> 
 
     <tr> 
 
     <th>Date</th> 
 
     <th>Description</th> 
 
     <th>Receipt No/Ref No</th> 
 
     <th>Payment Method</th> 
 
     <th>Amount</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>01-10-2017</td> 
 
     <td>DOB Balance</td> 
 
     <td>N/A</td> 
 
     <td>Cash</td> 
 
     <td>$1000</td> 
 
    </tr> 
 
    <tr> 
 
     <td>01-10-2017</td> 
 
     <td>DOB Balance</td> 
 
     <td>N/A</td> 
 
     <td>Cash</td> 
 
     <td>$1000</td> 
 
    </tr> 
 
    <tr> 
 
     <td>01-10-2017</td> 
 
     <td>DOB Balance</td> 
 
     <td>N/A</td> 
 
     <td>Cheque</td> 
 
     <td>$1000</td> 
 
    </tr> 
 
    <tr> 
 
     <td>01-10-2017</td> 
 
     <td>DOB Balance</td> 
 
     <td>N/A</td> 
 
     <td>TT</td> 
 
     <td>$1000</td> 
 
    </tr> 
 
    </tbody> 
 
    </table>

Answer 2

。だから、彼らのルールに従う必要があります。彼らのドキュメントの拳を確認してくださいhttp://eonasdan.github.io/bootstrap-datetimepicker/

ブートストラップdatetimepickerコンポーネントは、相対配置されたコンテナ内に配置する必要があります。