如何在Angular 17的AG Grid中设置日期范围筛选器的默认起止日期？

核心解决方案：使用initialValue配置项 #

在你的filterParams中添加initialValue配置，对应inRange选项的结构，传入from（起始日期）和to（结束日期）两个日期值即可直接设置默认范围。

修改后的完整filterParams配置 #

filterParams: {
  buttons: ['apply', 'reset'],
  maxNumConditions: 1,
  closeOnApply: true,
  defaultOption: 'inRange',
  filterOptions: ['inRange'],
  // 新增默认日期范围配置
  initialValue: {
    from: new Date('2024-01-01'),
    to: new Date('2024-12-31')
  }
}

关键注意点 #

• 日期格式需与列定义的日期解析/格式化规则匹配，如果使用了自定义日期组件，要确保from和to的格式能被组件正确识别。
• 若需在组件初始化后动态修改默认值，可通过AG Grid API实现：

  // 获取目标列的定义
  const targetColumn = this.gridApi.getColumnDef('yourDateColumnKey');
  // 更新默认日期范围
  targetColumn.filterParams.initialValue = {
    from: new Date('2024-06-01'),
    to: new Date('2024-06-30')
  };
  // 刷新筛选器生效
  this.gridApi.refreshFilter('yourDateColumnKey');
  

• 确保使用的是AG Grid内置日期筛选器（默认配置即为内置筛选器），自定义筛选器需自行处理默认值逻辑。

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