I'm developing a SPA with PrimeNG's table to display records, and each column has a filter for its data.
One of them is a date record, which comes as ISO string and is converted to a Date object before being fed to the table itself.
I need the date format to be "dd/MM/yyyy", and by default the p-columnFilter for date works with "MM/dd/yyyy", so I'm using the pTemplate of filter to customize the format in the calendar.
<ng-template ngFor let-col [ngForOf]="columns">
<th *ngIf="col.type !== 'date'" [pSortableColumn]="col.field">
{{col.header}}
<p-sortIcon [field]="col.field"></p-sortIcon>
</th>
<th *ngIf="col.type === 'date'" class="obe-table__date-header" [pSortableColumn]="col.field" [attr.rowspan]="2">
{{col.header}}
<p-sortIcon [field]="col.field"></p-sortIcon>
<p-columnFilter type="date" [field]="col.field" display="menu">
<ng-template pTemplate="filter">
<p-calendar dateFormat="dd/mm/yy"></p-calendar>
</ng-template>
</p-columnFilter>
</th>
</ng-template>
Then, when displaying the filter UI and clicking on "Apply", it acts as if it doesn't register the value. I was thinking about me missing an [ngModel] binding in the calendar, but I also tried that to no success.
Thank you in advance.
Your call to the function is missing :
(onSelect)="filter($event)"
don't forget in the ng-template:
let-filter="filterCallback"
it gives this :
<p-columnFilter type="date" [field]="col.field" display="menu">
<ng-template pTemplate="filter" let-filter="filterCallback">
<p-calendar dateFormat="dd/mm/yy" (onSelect)="filter($event)"></p-
calendar>
</ng-template>
</p-columnFilter>