ag-grid自定义过滤器实现

Question

我想做一个反应浮动日期过滤器，其工作原理与默认过滤器完全相同。 默认过滤器的范围等于，大于，小于，不等于。 我想保留这些过滤器的行为。 我唯一想更改的是输入格式 。 日期的输入格式默认为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解决方案，因为它将覆盖每个DateFilter并修改（通过原型）ag-grid代码。 它适用于我们的情况，但可能不适用于您的情况。
• 创建一个自定义过滤器，并使用默认过滤器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对象，如果存在名称冲突，则覆盖同名的项目。

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

这样，您可以编写一个日期过滤器，该过滤器可以通过colDef.filterParams提供格式，从而可以使用不同的日期格式（例如，使用moment.js）。

Ag-Grid有一些不错的日期示例-> https://www.ag-grid.com/javascript-grid-date-component/

另请参阅https://github.com/ag-grid/ag-grid/issues/1029#issuecomment-393546876，以了解此确切但仍未解决的问题以及vue.js的示例，您可以将其用作起点基于反应的过滤器