如何为含日期数据的PrimeNG TurboTable实现日期过滤功能？

Hey there! I’ve worked with PrimeNG’s TurboTable quite a bit, so here’s a straightforward, user-friendly way to add date filtering to your table. We’ll use PrimeNG’s p-calendar component for the filter input—it integrates seamlessly with the table and gives users an intuitive date picker interface.

Step 1: Update the Template with Date Filter #

First, modify your header template to add the calendar component in the filter row for the "插入时间" column. We’ll bind it to a component property and trigger filtering when the user selects a date:

<p-table [value]="boxes" #dt [filters]="dateFilters">
  <ng-template pTemplate="header">
    <tr>
      <th pSortableColumn="Number">
        Number
        <p-sortIcon field="Number"></p-sortIcon>
      </th>
      <th pSortableColumn="DateInserted">
        插入时间
        <p-sortIcon field="DateInserted"></p-sortIcon>
      </th>
    </tr>
    <tr>
      <th>
        <!-- 数字过滤输入框 -->
      </th>
      <th>
        <p-calendar
          [(ngModel)]="filterDate"
          (onSelect)="applyDateFilter(dt)"
          dateFormat="yy-mm-dd"
          placeholder="选择日期"
          [showIcon]="true"
        ></p-calendar>
      </th>
    </tr>
  </ng-template>
  <!-- Don't forget your body template to display data -->
  <ng-template pTemplate="body" let-box>
    <tr>
      <td>{{ box.Number }}</td>
      <td>{{ box.DateInserted | date:'yyyy-MM-dd' }}</td>
    </tr>
  </ng-template>
</p-table>

Step 2: Add Component Logic #

In your component class, define the filterDate variable and the applyDateFilter function. We’ll use TurboTable’s built-in filtering to match all entries from the selected full day (midnight to 11:59 PM)—this avoids exact timestamp mismatches:

import { Component } from '@angular/core';
import { Table } from 'primeng/table';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  boxes: any[] = []; // Your existing data array
  filterDate: Date | null = null;
  dateFilters: any = {};

  applyDateFilter(table: Table) {
    if (this.filterDate) {
      // Set start/end of selected day to capture all entries from that date
      const startOfDay = new Date(this.filterDate);
      startOfDay.setHours(0, 0, 0, 0);
      
      const endOfDay = new Date(this.filterDate);
      endOfDay.setHours(23, 59, 59, 999);

      this.dateFilters['DateInserted'] = {
        value: [startOfDay, endOfDay],
        matchMode: 'between'
      };
      table.filter([startOfDay, endOfDay], 'DateInserted', 'between');
    } else {
      // Clear the filter if no date is selected
      delete this.dateFilters['DateInserted'];
      table.filter(null, 'DateInserted', 'between');
    }
  }
}

Key Notes: #

• Date Comparison: If your DateInserted is stored as a string (instead of a Date object), convert it to a Date first in your filter logic to ensure accurate comparisons:

  const boxDate = new Date(box.DateInserted);
  

• Match Modes: PrimeNG supports other date match modes like equals, before, or after—adjust the matchMode in the filter object if you need different behavior.
• Clearing Filters: The code automatically removes the date filter when the user clears the calendar input.

Bonus: Date Range Filter (Start + End Date) #

If you want to let users filter between two dates, add two p-calendar components and adjust the logic:

<th>
  <div class="flex gap-2">
    <p-calendar
      [(ngModel)]="startDate"
      (onSelect)="applyDateRangeFilter(dt)"
      dateFormat="yy-mm-dd"
      placeholder="开始日期"
      [showIcon]="true"
    ></p-calendar>
    <p-calendar
      [(ngModel)]="endDate"
      (onSelect)="applyDateRangeFilter(dt)"
      dateFormat="yy-mm-dd"
      placeholder="结束日期"
      [showIcon]="true"
    ></p-calendar>
  </div>
</th>

Component code for range filtering:

startDate: Date | null = null;
endDate: Date | null = null;

applyDateRangeFilter(table: Table) {
  if (this.startDate && this.endDate) {
    this.dateFilters['DateInserted'] = {
      value: [this.startDate, this.endDate],
      matchMode: 'between'
    };
    table.filter([this.startDate, this.endDate], 'DateInserted', 'between');
  } else {
    delete this.dateFilters['DateInserted'];
    table.filter(null, 'DateInserted', 'between');
  }
}

This should give you a fully functional date filtering system tailored to your TurboTable. Let me know if you need help tweaking it to your specific data format!

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