日期时间选择器小部件奇怪的位置

4 留下封面

实际问题

我已经包含了代码片段以便更好地进行故障排除，但它本身有问题，但是请参考下图，您会注意到 datetimepicker 小部件位于表格后面。如何让它在一切面前？

代码片段

日期时间选择器表现得很奇怪。

请参阅代码片段，我遇到了一个错误，它没有提供正确的错误消息。我已经包含了所有正确的 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>$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>

苏拉杰

试试这个。如果这有助于接受答案。

  $('.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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。