using filterGlobal from primeNG's Table to search for Date that has been formatted with a pipe

Question

I'm working on a program utilizing PrimeNG and most of the code is working fine. I've come across a bug with a piped value.

I have a table where one column is populated with dates in ISOformat, but using Angular's built in pipe, I'm formatting it to look like MMM dd, yyyy. I then have a Search Keyword... input that is filtering the table appropriately for all columns, except the formatted date columns. This is what I have so far:

HTML

<p-table #dt [globalFilterFields]="['key1', 'key2', 'key3', 'date', 'key4', 'key5']">

  <div class="flex">
    <span class="p-input-icon-left ml-auto">
      <em class="pi pi-search"><em>
      <input pInputText type="text" (input)="dt.filterGlobal($event.target.value, 'contains')" placeholder="Search keyword" />
    </span>
  </div>

  <td>{{item.key1}}</td>
  <td>{{item.key2}}</td>
  <td>{{item.key3}}</td>
  <td>{{item.dateValue | date}}</td>
  <td>{{item.key4}}</td>
  <td>{{item.key5}}</td>
</p-table>

Again, to summarize, key1-5 is filtering correctly, but date is not. If I type in an ISO date, it will filter correctly, but that's not what I want, because a user is more likely to type in Jun 30, 2023 rather than 2023-06-30.

Any help would be appreciated.

Answer 1

As you noticed, the filterGlobal filter will only work with string-like values.

Looking at primeNg's docs, you should be better-off creating a column filter for your date column:

The user might want to filter on or before or after the date as well and the built-in column filter for dates from primeNg is pretty good.

you could add a header template to your table (like in the example):

<ng-template pTemplate="header">
...

and add the column filter:

<p-columnFilter type="date" field="dateValue" display="menu"></p-columnFilter>