如何对jQuery数据表进行日期范围过滤?

时间:2018-10-13 17:13:02

标签: jquery datatables

我正在使用jquery数据表。 我正在做日期范围过滤器。当我选择最小日期和最大日期时,结果不会在数据表上过滤任何数据。 我使用了脚本

$(document).ready(function() {

  var table1 = $('#sample_2').DataTable({
    dom: 'Bfrtip',
    buttons: [
      'copy', 'csv', 'excel', 'pdf', 'print',
    ]
  });

  $.fn.dataTable.ext.search.push(
    function(settings, data, dataIndex) {
      //var min = $('#min').datepicker("getDate");
      // var max = $('#max').datepicker("getDate");
      var min = $('#min').datepicker({
        dateFormat: 'yyyy-mm-dd'
      }).val();
      var max = $('#max').datepicker({
        dateFormat: 'yyyy-mm-dd'
      }).val();
      //console.log(min);
      console.log(min);
      console.log(max);
      //var startDate = new Date(data[4]);
      var today = new Date();
      var dd = today.getDate();
      var mm = today.getMonth() + 1; //January is 0!

      var yyyy = today.getFullYear();
      if (dd < 10) {
        dd = '0' + dd;
      }
      if (mm < 10) {
        mm = '0' + mm;
      }
      var today = yyyy + '-' + mm + '-' + dd;
      var startDate = today;
      console.log(startDate);

      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;
    }
  );


  $("#min").datepicker({
    onSelect: function() {
      table1.draw();
    },
    changeMonth: true,
    changeYear: true
  });
  $("#max").datepicker({
    onSelect: function() {
      table1.draw();
    },
    changeMonth: true,
    changeYear: true
  });

  // Event listener to the two range filtering inputs to redraw on input
  $('#min, #max').change(function() {
    table1.draw();
  });
});

$(document).ready(function() {

  var table1 = $('#sample_2').DataTable({
    dom: 'Bfrtip',
    buttons: [
      'copy', 'csv', 'excel', 'pdf', 'print',
    ]
  });

  $.fn.dataTable.ext.search.push(
    function(settings, data, dataIndex) {
      //var min = $('#min').datepicker("getDate");
      // var max = $('#max').datepicker("getDate");
      var min = $('#min').datepicker({
        dateFormat: 'yyyy-mm-dd'
      }).val();
      var max = $('#max').datepicker({
        dateFormat: 'yyyy-mm-dd'
      }).val();
      //console.log(min);
      console.log(min);
      console.log(max);
      //var startDate = new Date(data[4]);
      var today = new Date();
      var dd = today.getDate();
      var mm = today.getMonth() + 1; //January is 0!

      var yyyy = today.getFullYear();
      if (dd < 10) {
        dd = '0' + dd;
      }
      if (mm < 10) {
        mm = '0' + mm;
      }
      var today = yyyy + '-' + mm + '-' + dd;
      var startDate = today;
      console.log(startDate);

      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;
    }
  );


  $("#min").datepicker({
    onSelect: function() {
      table1.draw();
    },
    changeMonth: true,
    changeYear: true
  });
  $("#max").datepicker({
    onSelect: function() {
      table1.draw();
    },
    changeMonth: true,
    changeYear: true
  });

  // Event listener to the two range filtering inputs to redraw on input
  $('#min, #max').change(function() {
    table1.draw();
  });
});

日期格式为yyyy-mm-dd。 每次我搜索日期范围的结果都不会出现在数据表中。 请帮助我我在哪里做错了。谢谢。

1 个答案:

答案 0 :(得分:0)

在任何编程语言中,您都应避免完全对日期进行字符串比较。

只需将彼此之间的日期进行比较,或者如果需要,可以将其数值进行比较。

您已经陷入使用日期字符串的陷阱,因为您在其中一个使用'-',在另一个使用'/',这具有不同的ascii值,因此具有不同的> <排序顺序。另外,当您需要跨越不同的年份时,用mm-dd-yyyy而不是yyyy-mm-dd命令也无济于事。

最好避免将它们首先转换为字符串以进行比较。