ag-网格自定义筛选器实现

Question

I想要制作一个与默认过滤器完全相同的react浮动日期筛选器。默认过滤器有等于、大于、小于、不等于和范围。我想保留这些过滤器的行为。我想要改变的唯一事情是输入格式。日期的输入格式是默认的mm/dd/yy，我想要更改的是，我可以输入类似于2019年3月9日的日期。有什么简单的方法可以更改日期格式吗？如果没有，我必须创建一个自定义过滤器吗？如果我有一个定制的，我可以在哪里找到默认的实现作为参考。

我想要修改的

Answer 1

您不能(当前)使用当前的数据处理程序，因为它内部使用<input type="date" /> (如果使用chrome，否则只是一个文本字段)，它总是采用https://stackoverflow.com/a/9519493/885338中描述的浏览器区域设置

在https://github.com/ag-grid/ag-grid/issues/1029中也有描述(也有一个vue.js示例)

所以你要么

• 遵循这里的步骤大纲，https://github.com/ag-grid/ag-grid/issues/2233 它修改了DateFilter的原型，是一个相当麻烦的解决方案，因为它将覆盖每个DateFilter并修改(通过原型)ag网格代码。对我们的案子有用，但在你的案子里可能不行。
• 创建自定义筛选器，并使用默认筛选器https://github.com/ag-grid/ag-grid/blob/master/packages/ag-grid-community/src/ts/filter/dateFilter.ts作为引用。

如果创建自定义筛选器，则可以通过FilterParams提供类似所需日期格式的附加参数。

方法init( params )接受一个params对象，其中包含下面列出的项。如果用户通过colDef.filterParams属性提供params，这些参数将额外添加到params对象中，如果存在名称冲突，则重写同名项。

摘自：https://www.ag-grid.com/javascript-grid-filter-component/#ifilter-params

有了它，您可以编写一个日期筛选器，它可以使用不同的日期格式(例如，使用moment.js)，通过colDef.filterParams提供该格式。

Ag-Grid有一些用于Date -> https://www.ag-grid.com/javascript-grid-date-component/的示例。

此外，请参见https://github.com/ag-grid/ag-grid/issues/1029#issuecomment-393546876中这个尚未解决的确切问题和vue.js示例，您可以使用该示例作为基于反应的过滤器的起点。