ag-grid自定义过滤器实现

Question

I would like to make a react floating date filter that works exactly like the default filter. The default filter has equals, greater than, less than, not equal and in range. I would like to preserve the behavior of these filters. The only things that I would like to change is the input format . The input format of the date is for the default is mm/dd/yy and I would like to change is that I can input a date like this 09 Mar 2019. Is there an easy way to change the date format? If not will I have to create a custom filter? And if I do have a make a custom one, where can I find the implementation of the default one as reference.

what I would like to modify

Answer 1

you can't (currently) do it with the current datefilter because it internally uses <input type="date" /> (if using chrome, otherwise just a text field) which always takes the browsers locale as described in https://stackoverflow.com/a/9519493/885338

also described in https://github.com/ag-grid/ag-grid/issues/1029 (has also a vue.js example)

so you will either have to

• follow the steps outline here https://github.com/ag-grid/ag-grid/issues/2233
  which modifies the prototype of the DateFilter and is a rather hacky solution because it will overwrite every DateFilter and modifies (via prototype) ag-grid code. It worked for our cases, but might not in yours.
• create a custom filter and use the default filter https://github.com/ag-grid/ag-grid/blob/master/packages/ag-grid-community/src/ts/filter/dateFilter.ts as a reference.

if you create a custom filter you could supply additional params like the desired date format via FilterParams

The method init(params) takes a params object with the items listed below. If the user provides params via the colDef.filterParams attribute, these will be additionally added to the params object, overriding items of the same name if a name clash exists.

taken from: https://www.ag-grid.com/javascript-grid-filter-component/#ifilter-params

with that you could write a date filter that can work with different date formats (for example with using moment.js) by supplying the format via colDef.filterParams

Ag-Grid has some nice examples for Dates -> https://www.ag-grid.com/javascript-grid-date-component/

also see https://github.com/ag-grid/ag-grid/issues/1029#issuecomment-393546876 for this exact, still unresolved, issue and an example for vue.js which you may use as a starting point for your react based filter