2

I have a primeNG table that contains a date column. The date format for this column is 'dd/MM/yyyy' I filter by the date column and the filter works great but the format for the filter input is 'MM/dd/yyyy'

Using primeng version 11.0.0-rc.1

<p-table #dt1 [value]="customers" dataKey="id" [rows]="10" [showCurrentPageReport]="true"
[rowsPerPageOptions]="[10,25,50]" [loading]="loading" styleClass="p-datatable-customers p-datatable-gridlines"
[paginator]="true" currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries">
<ng-template pTemplate="header">
    <tr>
        <th>
            <div class="p-d-flex p-jc-between p-ai-center">
                Date
                <p-columnFilter type="date" field="date" display="menu"></p-columnFilter>
            </div>
        </th>
    </tr>
</ng-template>
<ng-template pTemplate="body" let-customer>
    <tr>        
        <td>
            {{customer.date | date: 'dd/MM/yyyy'}}
        </td>
    </tr>
</ng-template>

here is stackblitz:https://stackblitz.com/edit/primeng-tablefilter-demo-fjtwhq

If I change the dateFormat of the filter with ng-Template the filter does not work

<p-table #dt1 [value]="customers" dataKey="id" [rows]="10" [showCurrentPageReport]="true"
    [rowsPerPageOptions]="[10,25,50]" [loading]="loading" styleClass="p-datatable-customers p-datatable-gridlines"
    [paginator]="true" currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries">
    <ng-template pTemplate="header">
        <tr>
            <th>
                <div>
                    Date
                    <p-columnFilter type="date" field="date" display="menu">
                       <ng-template pTemplate="filter" let-value >
                          <p-calendar  [ngModel]="value" dateFormat="dd/mm/yy" >
                          </p-calendar> 
                       </ng-template>
                    </p-columnFilter>
                </div>
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-customer>
        <tr>        
            <td>
                {{customer.date | date: 'dd/MM/yyyy'}}
            </td>
        </tr>
    </ng-template>
</p-table>

Here is the modified stackblitz that does not work https://stackblitz.com/edit/primeng-tablefilter-demo-ibp6ku

Gringo
  • 765
  • 2
  • 10
  • 21

0 Answers0