1

How can I get the Global Search box to search with Month in a 'dd LLL YYYY' format. Example, find rows with Jan or Feb. Using Angular 12.0.3 and PrimeNG p-table in 12.2.2 .

<p-table #dt [value]="rowData" [(selection)]="selectedRowData" dataKey="id"
         [rowHover]="true"  [resizableColumns]="true" [autoLayout]="true" [lazy]="false"
         [rows]="10" [showCurrentPageReport]="true" [rowsPerPageOptions]="[10,25,50]" [loading]="showSpinner()"
         [paginator]="true" currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
         [filterDelay]="0" sortField="lastModifiedDate" [sortOrder]="-1"
         [globalFilterFields]="['someIdNum','someOtherField','status','someCount',
         'lastModifiedByUser', 'lastModifiedDate']">

<span class="p-input-icon-right p-ml-auto" style="margin-right: 7px">
                    <i class="pi pi-search"></i>
                    <input  name="globalFilterString" [(ngModel)]="globalFilterString"
                            pInputText type="text" (input)="applyFilterGlobal($event, 'contains')" placeholder="Filter" />
                </span>
        <button type="button" (click)="resetTable()" pButton label="Reset" icon="pi pi-replay"
                style="margin-left:.25em"></button>

then below:

<td>
   {{row.lastModifiedDate | date: 'dd LLL yyyy'}}
</td>
Randy
  • 729
  • 5
  • 14

1 Answers1

2

So for this, I registered a custom filter that also delegates to the original for normal cases:

export class SomeComponent implements OnInit {

    datePipe: DatePipe = new DatePipe('en-US');
    ngOnInit(): void {
        this.configureFilterService();  //configure custom filter here
        this.reloadData();  // normal call to load/reload data for component
    }

    private configureFilterService(){
        let containsFilter = this.filterService.filters['contains']; //handle to original built in filter
        // @ts-ignore
        this.filterService.register('containsWithDateFormat', (value, filter): boolean => {
            if (filter === undefined || filter === null || filter.trim() === '') {
                return true;
            }
            if (value === undefined || value === null) {
                return false;
            }
            if (value instanceof Timestamp || value instanceof Date || Date.parse(value)){
                // @ts-ignore
                let formattedDate = this.datePipe.transform(value, 'dd LLL YYYY')
                console.debug("filtering on formatted date: " + JSON.stringify(formattedDate) + " with " + JSON.stringify(filter) );
                // @ts-ignore
                return formattedDate.toString().includes(filter.toString());
            } else {
                console.debug("filtering on value: " + JSON.stringify(value) + " with " + JSON.stringify(filter) );
                return containsFilter(value, filter); // default to original
            }
        });
    }

    //indirection method to filter table globally and handle a cast to HTMLInputElement
    // @ts-ignore
    applyFilterGlobal($event, matchType) {
        this.table.filterGlobal(($event.target as HTMLInputElement).value, matchType);
    }

then in my html template use that filter mode:

  <input  name="globalFilterString" [(ngModel)]="globalFilterString"
                            pInputText type="text" (input)="applyFilterGlobal($event, 'containsWithDateFormat')" placeholder="Filter" />

Now, I can put 'Jan' or 'Feb' or '2021' or '2021' in the global filter and it will pick up the rows that match.

Randy
  • 729
  • 5
  • 14