Ag Grid：如何为自定义范围过滤器输入框设置占位文本

我有一列格式为YYYY-MM-DD, hh:mm:ss [AM/PM]的时间戳数据（示例：2024-01-01, 02:04:05 AM），需要给这列添加自定义范围过滤功能，支持输入起始和结束时间戳后返回过滤结果。

我已经通过filterParams里的filterOptions实现了这个功能，代码如下：

{
  field: 'timestampColumn',
  filterParams: {
    filterOptions: [
      {
        displayKey: 'inRange',
        displayName: '时间范围',
        predicate: ([filterFromDate, filterToDate], cellValue) => {
          const cellDate = new Date(cellValue); 
          const startDate = new Date(filterFromDate);
          const endDate = new Date(filterToDate);
          return cellDate > startDate && cellDate < endDate;
        },
        numberOfInputs: 2,
      },
    ],
  },
},

现在想给这两个自定义过滤器的输入框设置占位文本，这完全可以实现——只需要在你的自定义filterOption对象里添加inputPlaceholder属性即可。如果是多个输入框（这里是2个），可以传入一个字符串数组，数组的每一项对应一个输入框的占位文本。

修改后的完整代码如下：

{
  field: 'timestampColumn',
  filterParams: {
    filterOptions: [
      {
        displayKey: 'inRange',
        displayName: '时间范围',
        predicate: ([filterFromDate, filterToDate], cellValue) => {
          const cellDate = new Date(cellValue); 
          const startDate = new Date(filterFromDate);
          const endDate = new Date(filterToDate);
          return cellDate > startDate && cellDate < endDate;
        },
        numberOfInputs: 2,
        // 给两个输入框分别设置占位文本
        inputPlaceholder: ['例如：2024-01-01, 02:04:05 AM', '例如：2024-01-31, 11:59:59 PM']
      },
    ],
  },
},

这样设置后，两个输入框就会分别显示你定义的占位提示，用户输入时也能更清晰地知道需要遵循的格式。

内容的提问来源于stack exchange，提问作者Abhinandan Khilari