日期和时间筛选对数据表的日期不起作用

Question

下面是我写的代码。在这里，我所做的是基于引导日期时间选择器中的开始日期和结束日期选择，我正在过滤表行。但我不知道，这里没有搜索!!...我在下面的代码中做错了什么

$(function() {
  var table = $('#example').DataTable();
  $('#datetimepicker1').datetimepicker({
    format: 'YYYY-MM-DD HH:mm:ss'
  });
  $('#datetimepicker2').datetimepicker({
    format: 'YYYY-MM-DD HH:mm:ss'
  });
  $.fn.dataTable.ext.search.push(
    function(settings, data, dataIndex) {
      var min = $('#mindate').val();
      var max = $('#maxdate').val();
      var startDate = new Date(data[1]);
      if (min == null && max == null) {
        return true;
      }
      if (min == null && startDate <= max) {
        return true;
      }
      if (max == null && startDate >= min) {
        return true;
      }
      if (startDate <= max && startDate >= min) {
        return true;
      }
      return false;
    }
  );
  $("#mindate").on({
    onSelect: function() {
      table.draw();
    },
  });
  $("#mindate").on({
    onSelect: function() {
      table.draw();
    },
  });
  $('#mindate, #mindate').change(function() {
    table.draw();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.2/js/bootstrap-datetimepicker.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.2/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
<div class="col-xs-6 selectpicker form-group">
  <label>From Date:</label>
  <div class='input-group date' id="datetimepicker1">
    <input type='text' class="form-control" id="mindate" />
    <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
    </span>
  </div>
</div>
<div class="col-xs-6 selectpicker form-group">
  <label>To Date:</label>
  <div class='input-group date' id="datetimepicker2">
    <input type='text' class="form-control" id="maxdate" />
    <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
    </span>
  </div>
</div>
<table id="example" class="display" style="width:100%">
  <thead>
    <tr>
      <th>From Date</th>
      <th>To Date</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>2018-08-10 20:13:22</td>
      <td>2018-08-12 20:13:22</td>
    </tr>
    <tr>
      <td>2018-08-8 20:13:22</td>
      <td>2018-08-9 20:13:22</td>
    </tr>
    <tr>
      <td>2018-08-15 20:13:22</td>
      <td>2018-08-16 20:13:22</td>
    </tr>
    <tr>
      <td>2018-08-4 20:13:22</td>
      <td>2018-08-5 20:13:22</td>
    </tr>
  </tbody>
</table>

有关参考，请检查以下链接以编程方式过滤数据

代码$.fn.dataTable.ext.search.push()是过滤功能，它不起作用，意味着搜索没有发生!!

Answer 1

尝试使用 dp.change 事件进行引导日期时间选择器。工作示例如下。更改日期选择器后，单击数据表的任何Column header。然后它将显示过滤后的数据。这可能是数据表的问题，也可能是你/我编写的代码的问题。但过滤正在发生。

此外，如果在from和to日期选取器中未选择日期，则将null分配给max和min变量

$(function() {
  var table = $('#example').DataTable();
  $('#datetimepicker1').datetimepicker({
    format: 'YYYY-MM-DD HH:mm:ss'
  });
  $('#datetimepicker2').datetimepicker({
    format: 'YYYY-MM-DD HH:mm:ss'
  });
  $('#datetimepicker1').on('dp.change', function() {
    table.draw();
  });
  $('#datetimepicker2').on('dp.change', function() {
    table.draw();
  });
  $.fn.dataTable.ext.search.push(
    function(settings, data, dataIndex) {
      var min = $('#mindate').val() ? new Date($('#mindate').val()) : null;
      var max = $('#maxdate').val() ? new Date($('#maxdate').val()) : null;
      var startDate = new Date(data[0]);
      var endDate = new Date(data[1]);
      if (min == null && max == null) {
        return true;
      }
      if (min == null && startDate <= max) {
        return true;
      }
      if (max == null && startDate >= min) {
        return true;
      }
      if (startDate <= max && startDate >= min) {
        return true;
      }
      return false;
    }
  );
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.2/js/bootstrap-datetimepicker.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.2/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
<div class="col-xs-6 selectpicker form-group">
  <label>From Date:</label>
  <div class='input-group date' id="datetimepicker1">
    <input type='text' class="form-control" id="mindate" />
    <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
    </span>
  </div>
</div>
<div class="col-xs-6 selectpicker form-group">
  <label>To Date:</label>
  <div class='input-group date' id="datetimepicker2">
    <input type='text' class="form-control" id="maxdate" />
    <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
    </span>
  </div>
</div>
<table id="example" class="display" style="width:100%">
  <thead>
    <tr>
      <th>From Date</th>
      <th>To Date</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>2018-08-10 20:13:22</td>
      <td>2018-08-12 20:13:22</td>
    </tr>
    <tr>
      <td>2018-08-08 20:13:22</td>
      <td>2018-08-09 20:13:22</td>
    </tr>
    <tr>
      <td>2018-08-15 20:13:22</td>
      <td>2018-08-16 20:13:22</td>
    </tr>
    <tr>
      <td>2018-08-04 20:13:22</td>
      <td>2018-08-05 20:13:22</td>
    </tr>
  </tbody>
</table>

更新：

我能够解决表格刷新问题。这与Datatables不完全一样，与bootstrap datetimepicker本身不完全一样。我已将代码从

$('#mindate').on('dp.change', function() {到$('#datetimepicker1').on('dp.change', function() {

和

$('#maxdate').on('dp.change', function() {到$('#datetimepicker2').on('dp.change', function() {

现在解决方案工作正常