微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

如何更改primeNG列过滤器上的dateFormat?

如何解决如何更改primeNG列过滤器上的dateFormat?

我有一个包含日期列的 primeNG 表。此列的日期格式为“dd/MM/yyyy” 我按日期列过滤,过滤器效果很好,但过滤器输入的格式是“MM/dd/yyyy”

使用primeng 版本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>

这里是堆栈闪电战:https://stackblitz.com/edit/primeng-tablefilter-demo-fjtwhq

如果我用 ng-Template 更改过滤器的 dateFormat,过滤器不起作用

<p-table #dt1 [value]="customers" dataKey="id" [rows]="10" [showCurrentPageReport]="true"
    [rowsPerPageOptions]="[10,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>

这是修改后的stackblitz,它不起作用https://stackblitz.com/edit/primeng-tablefilter-demo-ibp6ku

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。