Column search filter based on date range

manohar_cd

Hi all,

I have a requirement to filter a column of date type based on two date pickers(min and max). I found some examples on the forum and added to my code, but after adding this functionality my main datatable 'search' box not working.

My requirement is to make my table work after having both search(main search and column search based on min and max dates)

I am posting my code also, please suggest something...
My datatable collects data from php and the date format it display in table like: 08/30/14

/////////////////

$(document).ready(function() {

//Data table initialization
var oTable = $('#tableLabor').dataTable({
"aLengthMenu": [[100, 500, 1000, -1], [100, 500, 1000, "All"]],
"iDisplayLength": -1,
"bSort":false,
"aaData": <?php echo "[$javascript]";?>,
"aaSorting": [],
"aoColumns":
[
{ "sType": "html" },
{ "sType": "html" },
{ "sType": "html" },
{ "sType": "html" },
{ "sType": "html" },
{ "sType": "date" },
{ "sType": "numeric" },
{ "sType": "numeric" },
{ "sType": "numeric" },
{ "sType": "numeric" },
{ "sType": "numeric" },
{ "sType": "numeric" }
]
});//close datable

$("

Date Filter:  From  To

").prependTo('div.dataTables_filter');

    // Show datepickers
    var currentDate = new Date();
    var weekagoDate = new Date();
    weekagoDate.setDate (weekagoDate.getDate() - 7);

    $(".datepick").datepicker({
        showOn: "both",
        dateFormat: 'mm/dd/y',
        buttonImage: "http://www.effinghamparkdistrict.org/graphics/calendar_icon.png"
    });
    $("#min").datepicker("setDate", weekagoDate);
    $("#max").datepicker("setDate", currentDate);


    $('#min, #max').on( 'keyup', function () {
        //alert(this.value);//manu
        oTable.column(5)
                .search( this.value )
                .draw();
    } );

} );// close doc ready

/////////////////

daniel_r

You also can use my yadcf plugin ,see example
http://yadcf-showcase.appspot.com/DOM_source.html

It has range_date filter and another 8 different types of filters.