datetimepicker 小部件奇怪的位置

Question

实际问题

我包含了代码片段以便更好地进行故障排除，但它本身出现了问题，但是请参考下图，您会注意到日期时间选择器小部件位于 table 后面。如何做到万物面前？

代码片段

日期时间选择器运行异常。

参考代码片段，我遇到了一个错误，它没有提供正确的错误消息。我已经包括了所有适当的 cdn。

此外，日期时间选择器小部件可以出现，但它被放置在结果框的底部。

  $('.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>00</td>
    </tr>
    <tr>
      <td>01-10-2017</td>
      <td>DOB Balance</td>
      <td>N/A</td>
      <td>Cash</td>
      <td>00</td>
    </tr>
    <tr>
      <td>01-10-2017</td>
      <td>DOB Balance</td>
      <td>N/A</td>
      <td>Cheque</td>
      <td>00</td>
    </tr>
    <tr>
      <td>01-10-2017</td>
      <td>DOB Balance</td>
      <td>N/A</td>
      <td>TT</td>
      <td>00</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>00</td>
    </tr>
    <tr>
      <td>01-10-2017</td>
      <td>DOB Balance</td>
      <td>N/A</td>
      <td>Cash</td>
      <td>00</td>
    </tr>
    <tr>
      <td>01-10-2017</td>
      <td>DOB Balance</td>
      <td>N/A</td>
      <td>Cheque</td>
      <td>00</td>
    </tr>
    <tr>
      <td>01-10-2017</td>
      <td>DOB Balance</td>
      <td>N/A</td>
      <td>TT</td>
      <td>00</td>
    </tr>
    </tbody>
  </table>

Answer 2

您已使用 bootstrap 日期选择器。所以，你需要遵守他们的规则。请先检查他们的文档 http://eonasdan.github.io/bootstrap-datetimepicker/

Bootstrap datetimepicker 组件应放置在相对定位的容器中。

datetimepicker 小部件奇怪的位置

datetimepicker widget weird placement

jquery

css

twitter-bootstrap

datetimepicker

eonasdan-datetimepicker