如何在Angular的PrimeNG Table中添加时间/时长列过滤器

PrimeNG的p-columnFilter默认没有专门的时长类型过滤器，针对你的需求，可通过以下几种方式实现自定义过滤：

1. 基础文本匹配过滤器 #

直接自定义过滤器模板，使用普通输入框实现包含匹配，适用于简单的模糊查找：

<p-columnFilter [field]="col.field" display="menu">
  <ng-template pTemplate="filter">
    <input 
      type="text" 
      pInputText 
      [(ngModel)]="durationFilter" 
      (input)="handleDurationFilter()"
      placeholder="输入时长筛选（HH:mm:ss）"
    />
  </ng-template>
</p-columnFilter>

组件内实现过滤逻辑：

durationFilter: string = '';
// 假设你的表格实例为#table
@ViewChild('table') table: Table;

handleDurationFilter() {
  this.table.filter(this.durationFilter, col.field, 'contains');
}

2. 精准时长数值比较过滤器 #

如果需要按时长大小筛选（比如大于/小于某个时长），可自定义过滤匹配规则：
首先在组件初始化时注册自定义匹配模式：

import { FilterMatchMode } from 'primeng/api';

ngOnInit() {
  // 注册"时长大于"匹配器
  FilterMatchMode.register('durationGT', (value: string, filter: string) => {
    // 将HH:mm:ss格式转成秒数用于比较
    const timeToSeconds = (timeStr: string): number => {
      const [hours, mins, secs] = timeStr.split(':').map(Number);
      return hours * 3600 + mins * 60 + secs;
    };

    if (!value || !filter) return true;
    return timeToSeconds(value) > timeToSeconds(filter);
  });
}

然后在模板中使用自定义匹配模式：

<p-columnFilter [field]="col.field" display="menu" matchMode="durationGT">
  <ng-template pTemplate="filter">
    <input 
      type="text" 
      pInputText 
      [(ngModel)]="minDuration" 
      (input)="handleDurationFilter()"
      placeholder="最小时长（HH:mm:ss）"
    />
  </ng-template>
</p-columnFilter>

3. 格式化输入优化 #

使用p-inputMask限制输入格式，确保用户输入符合HH:mm:ss规范：

<p-columnFilter [field]="col.field" display="menu">
  <ng-template pTemplate="filter">
    <p-inputMask 
      [(ngModel)]="durationFilter" 
      mask="99:99:99" 
      placeholder="HH:mm:ss"
      (input)="handleDurationFilter()"
    ></p-inputMask>
  </ng-template>
</p-columnFilter>

注意事项 #

• 如果你的时长数据存储为数值类型（比如秒数），可直接在匹配器中跳过格式转换，直接进行数值比较
• 若需要多条件筛选（比如范围筛选），可扩展模板添加两个输入框，分别控制最小/最大时长，在过滤逻辑中组合条件

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