How would you integrate a date range picker?

[dflow]

Hi great package!

How would you integrate a daterange picker i.e on a collection? https://github.com/dangrossman/bootstrap-daterangepicker and where can you format dates via Carbon?

thanks

[timgws]

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(); });

[dflow]

hi thanks for the informative reply

I tried to implement your solution, but couldn't get the start and end date input fields to be triggered. http://laravel.io/bin/xKm9N your advise

[timgws]

What error/behaviour are you seeing that is incorrect?

[thienhung1989]

Hi, @dflow You can use:

http://www.datatables.net/plug-ins/api/fnReloadAjax

• Add-on

jQuery.fn.dataTableExt.oApi.fnReloadAjax = function (oSettings, sNewSource, fnCallback, bStandingRedraw) {
    // DataTables 1.10 compatibility - if 1.10 then `versionCheck` exists.    
    // 1.10's API has ajax reloading built in, so we use those abilities    
    // directly.    
    if (jQuery.fn.dataTable.versionCheck) {
        var api = new jQuery.fn.dataTable.Api(oSettings);
        if (sNewSource) {
            api.ajax.url(sNewSource).load(fnCallback, !bStandingRedraw);
        } else {
            api.ajax.reload(fnCallback, !bStandingRedraw);
        }
        return;
    }
    if (sNewSource !== undefined && sNewSource !== null) {
        oSettings.sAjaxSource = sNewSource;
    }
    // Server-side processing should just call fnDraw    
    if (oSettings.oFeatures.bServerSide) {
        this.fnDraw();
        return;
    }
    this.oApi._fnProcessingDisplay(oSettings, true);
    var that = this;
    var iStart = oSettings._iDisplayStart;
    var aData = [];
    this.oApi._fnServerParams(oSettings, aData);
    oSettings.fnServerData.call(
        oSettings.oInstance,
        oSettings.sAjaxSource,
        aData,
        function (json) {        /* Clear the old information from the table */
            that.oApi._fnClearTable(oSettings);
            /* Got the data - add it to the table */
            var aData = (oSettings.sAjaxDataProp !== "") ? that.oApi._fnGetObjectDataFn(oSettings.sAjaxDataProp)(json) : json;
            for (var i = 0; i < aData.length; i++) {
                that.oApi._fnAddData(oSettings, aData[i]);
            }
            oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
            that.fnDraw();
            if (bStandingRedraw === true) {
                oSettings._iDisplayStart = iStart;
                that.oApi._fnCalculateEnd(oSettings);
                that.fnDraw(false);
            }
            that.oApi._fnProcessingDisplay(oSettings, false);
            /* Callback user function - for event handlers etc */
            if (typeof fnCallback == 'function' && fnCallback !== null) {
                fnCallback(oSettings);
            }
        },
        oSettings
    );
};

• And Call

$('input[name="start"]').change(function() { oTable.fnReloadAjax (); });
    $('input[name="end"]').change(function() { oTable.fnReloadAjax (); });

• Important: (note: setOptions if you use branch development because branch maste no support)

   Datatable->
...
->setCallbacks(["fnServerParams" => 'function ( aoData ) {
     /* this step important, it will pass param start, end to server */
    aoData.push(
       { 
          "name": "start", "value": $(\'input[name="start"]\').val()
       }
    );
   aoData.push(
       { 
          "name": "end", "value": $(\'input[name="end"]\').val()
       }
    );
}'])
...
 -> render();

• And check by step tut of @timgws.

Good Luck.

[timgws]

@dflow Use the onChange callback to get the datatable to redraw when the datepicker (see the docs at http://tamble.github.io/jquery-ui-daterangepicker/)

$(".date").datepicker({
    onChange: function() {
        oTable.fnDraw();
    }
});