daterangepicker for grid

Questionsdaterangepicker for grid
Melissa Yip asked 5 years ago

Is it possible to place daterangepicker on the same row as the operation icons like add/edit/delete and then retrieve those dates for an ajax call? I see in one demo that we can filter a column with a selected date range, but I want to use that feature more generally. Specifically, I want to be able to display a daterangepicker when a custom button is clicked, get a start and end date, and use those values to make a PATCH request. Thanks.

3 Answers
Abu Ghufran Staff answered 5 years ago

I’ll update you back after some working.

_________________________
Abu Ghufran - Dev Team
Grid 4 PHP Framework
 
Abu Ghufran Staff answered 5 years ago

It has some limitations to integrate in lib.
You can try connecting daterange by following these steps.

1, Include js css files

https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js
https://cdn.rawgit.com/tamble/jquery-ui-daterangepicker/0.5.0/jquery.comiseo.daterangepicker.min.js
https://cdn.rawgit.com/tamble/jquery-ui-daterangepicker/0.5.0/jquery.comiseo.daterangepicker.css

2, Add dataInit event (when data arrive) on desired column

$col[“editoptions”][“dataInit”] = “function(o){setTimeout(function(){ link_dtrange(o); },200);}”;

In JS:

    function link_dtrange(el)
    {
        jQuery(el).daterangepicker({
                    ‘datepickerOptions’: {‘numberOfMonths’:2, ‘changeYear’:true, ‘maxDate’:null}
                });
    }

3, Use formatter / unformat to display correctly in edit mode / display mode. As by default it will have json style value. To make it user friendly, you will need these functions.

$col[“formatter”] = “function(cellval,options,rowdata){ return …; }”;
$col[“unformat”] = “function(cellval,options,cell){ return …; }”;
 

See http://phpgrid.org/docs/column-options/#column-formatter  -> custom formatter for references.
 

_________________________
Abu Ghufran - Dev Team
Grid 4 PHP Framework
 
Melissa Yip answered 5 years ago

Thanks. I’ll look into it.

Your Answer

12 + 5 =

Login with your Social Id:

OR, enter

Attach code here and paste link in question.
Attach screenshot here and paste link in question.



How useful was this discussion?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate it.

We are sorry that this post was not useful for you!

Let us improve this post!

Tell us how we can improve this post?