CODEWITHSUNDEEP
jquerydatatablesdate-range
ravicandy
ravicandy

Reputation: 151

Jquery DataTable Date Filter

I have a jquery datatable and it has date filter.My Code looks like this as mentioned in the below plunker link mentioned.Pasting my JS code for DatePickers

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

From and To Date Range Filter seems to be working fine.But along with these I may have one radio button (ie: This week and this month) this week radio button will should give results between today date and last week and and same is the case with month radio button. How should I solve this.?

Upvotes: 1

Views: 2886

Answers (1)

Bhavin Panchani
Bhavin Panchani

Reputation: 1352

Add radio button after 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>

Write script that filter datatable based on selection :

$("#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

Upvotes: 1

Related Questions