Jquery DataTable Date Filter

Question

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.?

Bhavin Panchani · Accepted Answer · 2015-05-27 05:10:23Z

1

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

edited May 27, 2015 at 5:10

answered May 26, 2015 at 19:03

Bhavin Panchani

1,36211 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

ravicandy Over a year ago

Thank You :) But in the plunker If I select week checkbox right now it is showing suppose it is 27-05-2015 and above one week records but I want to fetch records between 21 - 27th and same is the same with month .Kindly assist

ravicandy Over a year ago

Hi Bhavin there seems to be a small issue currently date format in the above plunker is mm-dd-yy I want the date format to be dd-mm-yyyy If I have added dateFormat: 'dd-mm-yy' the search doesnt seem to work What must be done here Please assist?

Bhavin Panchani Over a year ago

@ravicandy : searching is working. do you mean filtering(by this month and week ) is not working?

ravicandy Over a year ago

No bhavin if I change the date field in datatable to dd/MM/yyyy then the search fails where exactly to modify?

Collectives™ on Stack Overflow

Jquery DataTable Date Filter

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related