How to integrate a date range picker

This is based on an answer given to a question in the bug tracker (https://github.com/Chumper/Datatable/issues/312)

This is how I do it:

This is a jQuery Datepicker (although, you could use anything!).

I change the Datatable template (although you can now use setOptions, and that would be the preferred way) so that this is added to the Javascript output:

"fnServerParams": function ( aoData ) {
    aoData.push(
        { "name": "date", "value": $('input[name="date"]').val() }
    );
},

Then, on the controller that creates my Datatable query, I simply check if the date value has been set, and if it has, I will modify the query before passing it to Datatable::query

    $query = DB::table('articles')
        ->where('company_id', $company_id);

    if (Input::has('date')) {
        $query = $query->where('date', '=', $query);
    }

    return Datatable::query($query)
        ->showColumns($columns)
        ->searchColumns($columns)
        ->orderColumns($columns)
        ->make();

Finally, adding to the javascript template the code to detect changes on the input field to refresh the datatable when the field is updated will bring it all together.

    // ....
    oTable = jQuery('#{{ $id }}').dataTable({
    // ...
    })
    $('input[name="date"]').change(function() { oTable.fnDraw(); });