Question

实际问题

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

代码段

datetimepicker表现得很奇怪。

请参阅代码段，我遇到错误，但未提供正确的错误消息。我已经包括了所有正确的cdn。

此外，datetimepicker小部件可以显示，但它位于结果框的底部。

.ReadLine()

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

Answer 1

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

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

Answer 2

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

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

datetimepicker小部件奇怪的位置

2 个答案: