jQuery UI Datepicker in DataTables header not spawning?

Question

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');

Did you provide the correct jsfiddle link? I'm not seeing any date fields at all or the jquery you provided in the fiddle. — Gobo
– Gobo, Commented Oct 29, 2013 at 18:47

Gobo · Accepted Answer · 2013-10-30 15:19:28Z

3

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/

edited Oct 30, 2013 at 15:19

answered Oct 29, 2013 at 19:37

Gobo

6871 gold badge6 silver badges16 bronze badges

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

3 Comments

triplethreat77 Over a year ago

Very helpful, thank you. This does make sense, of course. I was over thinking this.

Gobo Over a year ago

Sure thing. As far as filtering, there's nothing in the fiddle that I saw that utilized any date fields.

triplethreat77 Over a year ago

clearly I was failing to update my Fiddles yesterday. jsfiddle.net/Z85QC/13

Collectives™ on Stack Overflow

jQuery UI Datepicker in DataTables header not spawning?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related