CODEWITHSUNDEEP
javascriptjqueryfilterdatatabledatepicker
triplethreat77
triplethreat77

Reputation: 1296

jQuery UI Datepicker in DataTables header not spawning?

I have datepickers in the header of my DataTable. I need 2 things here.

One, the same exact datepickers that are working outside the table will not work within the header (or include calendar icons). I've tried implementing these via DOM as well, which still didn't work and this way seems less messy.

Two, these datepickers should act as a filter for the table. So From October 2, To October 4 should hide all dates outside that bracket. Any ideas? Thanks in advance.

http://jsfiddle.net/Z85QC/12/

jQuery

$(".datepick").datepicker({
    showOn: "both",
    buttonImage: "http://www.effinghamparkdistrict.org/graphics/calendar_icon.png"
});

$('#example').dataTable({
    "bJQueryUI": true,
        "sPaginationType": "full_numbers",
        "aLengthMenu": [
        [5, 10, 15, 20, -1],
        [5, 10, 15, 20, "All"]
    ],
        "iDisplayLength": 10
});

$("<div class='nBreak padR'><label>Date Filter:</label>&nbsp;&nbsp;From <input type='text' class='datepick' />&nbsp;To <input type='text' class='datepick' /></div>").prependTo('div.dataTables_filter');

Upvotes: 2

Views: 4925

Answers (1)

Gobo
Gobo

Reputation: 687

var oTable = $('#example').dataTable({
    "bJQueryUI": true,
        "sPaginationType": "full_numbers",
        "aLengthMenu": [
        [5, 10, 15, 20, -1],
        [5, 10, 15, 20, "All"]
    ],
        "iDisplayLength": 10
});

//added id's to text inputs to aid in attaching event listeners on date selects
$("<div class='nBreak padR'><label>Date Filter:</label>&nbsp;&nbsp;From <input id='min' type='text' class='datepick' />&nbsp;To <input id='max' type='text' class='datepick' /></div>").prependTo('div.dataTables_filter');

//datepicker initialization move to AFTER creation of the datatable so plugin could do it's thing
$(".datepick").datepicker({
    showOn: "both",
    buttonImage: "http://www.effinghamparkdistrict.org/graphics/calendar_icon.png"
});

//datatable documentation to push custom filtering functions
$.fn.dataTableExt.afnFiltering.push(
    function(oSettings, aData, iDataIndex){
        var iMin = document.getElementById('min').value;
        var iMax = document.getElementById('max').value;

        if(iMin == null || iMin == "")      {
            return true;
        }
        if(iMax == null || iMax == "")      {
            return true;
        }

        var minDate = new Date(iMin);
        var maxDate = new Date(iMax);

        var date = new Date(aData[1]); //column index 1 contains dates

        if( minDate <= date && date <= maxDate){
            return true;
        }
        return false;
    }
);

//Added events for listening to datepicker selects that will trigger the table to redraw and run the custom filtering
$('#min').datepicker("option","onSelect",function(dateString){
    oTable.fnDraw();
});

$('#max').datepicker("option","onSelect",function(dateString){
    oTable.fnDraw();
});

Here are the changes(commented in the code), basically you needed to:

  • move the datepicker initialization after the grid creation so the datepickers in it's header get created.
  • The datepickers in the datagrid were given id's so we could easily attach listeners to them.
  • The documentation for datatables allows users to define custom filtering rules with the afnFiltering.push call (http://datatables.net/release-datatables/examples/plug-ins/range_filtering.html)
  • finally at the end we attached onselect listeners to the datagrid datepickers so the table will get redrawn and run the custom filtering function.

All this is demonstrated here: http://jsfiddle.net/RP6Wn/

Upvotes: 3

Related Questions