Melissa Yip asked 6 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.
Abu Ghufran Staff answered 6 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.
