Jquery DataTable 日期过滤器

Question

我有一个 jquery 数据表，它有日期 filter.My 代码看起来像下面的 plunker link mentioned.Pasting 我的 DatePickers 的 JS 代码

$(function() {
  var oTable=$('#datatable').DataTable({
    "oLanguage": {
      "sSearch": "Filter Data"
    },
    "iDisplayLength": -1,
    "sPaginationType": "full_numbers",

  });

  $('#datepicker_from').click(function() {
    $("#datepicker_from").datepicker("show");
  });
  $('#datepicker_to').click(function() {
    $("#datepicker_to").datepicker("show");
  });


  $("#datepicker_from").datepicker({
    "onSelect": function(date) {
      minDateFilter = new Date(date).getTime();
      oTable.fnDraw();
    }
  }).keyup(function() {
    minDateFilter = new Date(this.value).getTime();
    oTable.fnDraw();
  });

  $("#datepicker_to").datepicker({
    "onSelect": function(date) {
      maxDateFilter = new Date(date).getTime();
      oTable.fnDraw();
    }
  }).keyup(function() {
    maxDateFilter = new Date(this.value).getTime();
    oTable.fnDraw();
  });

});

// Date range filter
minDateFilter = "";
maxDateFilter = "";

$.fn.dataTableExt.afnFiltering.push(
  function(oSettings, aData, iDataIndex) {
    if (typeof aData._date == 'undefined') {
      aData._date = new Date(aData[0]).getTime();
    }

    if (minDateFilter && !isNaN(minDateFilter)) {
      if (aData._date < minDateFilter) {
        return false;
      }
    }

    if (maxDateFilter && !isNaN(maxDateFilter)) {
      if (aData._date > maxDateFilter) {
        return false;
      }
    }

    return true;
  }
);
    http://plnkr.co/edit/yTAmQRJHN1zVdzYJBKop?p=preview

从和到日期范围过滤器似乎与这些一起工作 fine.But 我可能有一个单选按钮（即：本周和本月）本周单选按钮将给出今天和上周之间的结果，月单选按钮也是如此。我该如何解决？

Answer 1

在 date_filter 之后添加单选按钮：

<p id="radio_date_filter">
   <input type="radio" name="filterTable" value="week" />This Week
   <input type="radio" name="filterTable"  value="month"/>This Month
</p>

编写根据选择过滤数据表的脚本：

$("#radio_date_filter input:radio").click(function(){


    var currentDate = new Date();

    if($(this).val() == 'week'){

      var weekDate = new Date();
      var first = weekDate.getDate() - 7;
      var firstDayofWeek = new Date(weekDate.setDate(first));
      minDateFilter = firstDayofWeek.getTime();


    }else{

       var monthDate = new Date();
       var firstDayOfMonth = new Date(monthDate.setMonth(monthDate.getMonth() - 1));
       minDateFilter = firstDayOfMonth.getTime();

    }

    maxDateFilter = currentDate.getTime();
    oTable.fnDraw();
});

working plunker

Jquery DataTable 日期过滤器

Jquery DataTable Date Filter

jquery

jquery-datatables

date-range