How to add additional filters to Datatables header

Question

I need two different things to happen to this Datatable:

One: I need to add the From and To datepicker inputs to the header of my Datatable, with bJQueryUI included. I found this discussion, http://datatables.net/forums/discussion/comment/16235 but as you can see in my fiddle my inputs are still not being added to the header. Example code below as well.

Two: When clicking inside these inputs, the datepicker widget shows and allows you to pick a date. I need to filter the table between specific dates. As you can see in this example I have October 1-7 included, but maybe I want to filter it between October 4-6. So, on change of the To input, the table should filter accordingly. Any ideas? Thanks in advance.

http://jsfiddle.net/BWCBX/24/

jQuery

$('#example').dataTable({
    "sDom": 'R<C><"process_status">T<"clear"><"ui-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"lfr>t<"ui-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix"ip>',
        "bJQueryUI": true,
        "sPaginationType": "full_numbers",
        "aLengthMenu": [
        [5, 10, 15, 20, -1],
        [5, 10, 15, 20, "All"]
    ],
        "iDisplayLength": 10
});

$(".process_status").html("From <input type='text' class='datepick' />&nbsp;<span class='icoMoon icon-calendar-10 icon-set delBlue' title='Revert'></span> To <input type='text' class='datepick' />&nbsp;<span class='icoMoon icon-calendar-13 icon-set delBlue' title='Revert'></span>");

Answer 1

You can use my Yet Another DataTables Column Filter - (yadcf) plugin,

use the filter_type attribute like this:

filter_type: "range_date"

Also check the date_format attribute in case that you want a date format different than the default one mm/dd/yyyy