如何更改 primeNG 数据表 p 列过滤器日期格式？

Question

按日期过滤时如何以及是否可以更改日期格式？

<p-columnFilter type="date" [field]="col.field" display="menu">

默认格式是mm/dd/yyyy但是我想实现dd/mm/yyyy

Answer 1

如果你使用的是“p-columnFilter”组件，这意味着你在p-table里面，你想根据filter

过滤值

你可以用这个：

<p-table dataKey="id">
   <ng-template pTemplate="header">
       <tr>
            <th>Data</th>

            <th>Name</th>
       </tr>
       <tr>
            <th>
               <p-columnFilter type="date" field="date" matchMode="is">
                    <ng-template pTemplate="filter" let-filter="filterCallback">
                       <p-calendar (onSelect)="filter($event)" dateFormat="dd/mm/yy"></p-calendar>
                    </ng-template>
               </p-columnFilter>
            </th>

            <th>
               <p-columnFilter type="text" field="name"></p-columnFilter>
            </th>
       </tr>
   </ng-template>
</p-table>

解释：

我正在自定义字段过滤器的设计，以实现此目的：

在“p-columnFilter”中，我添加 (ng-content) 并将 pTemplate 指令设置为“filter”。

我还得到别名为“filter”的“filterCallback”函数

示例代码：

<p-columnFilter type="date" field="date" matchMode="is">
  <ng-template pTemplate="filter" let-anyname="filterCallback">
      //Custom Design (Example p-calendar, or any other)
      Data:
      <input type="text" (change)="anyname($event.value)"></input>
  </ng-template>
</p-columnFilter>

“anyname”函数是“filterCallback”函数的别名，调用时将应用p-columnFilter组件的过滤器。

我做的是：自定义Design，调用p-columnfFilter组件的filter(filterCallback)取一定值

如果还有什么问题，欢迎评论，我会尽力帮助的；

重要提示：您可以使用名为的 PrimeNG 组件仅格式化日期显示：，使用 dateFormat 输入

示例：

<p-calendar dateFormat="dd.mm.yy"></p-calendar>

Answer 2

<p-columnFilter [field]="filter_field">
  <ng-template pTemplate="filter" let-value let-filter="filterCallback">
    <p-calendar #fd [ngModel]="value" dataType="date" dateFormat="dd/mm/yyyy" [showIcon]="false" [showOnFocus]="false(onBlur)="filter(fd.value)"></p-calendar>
  </ng-template>
</p-columnFilter>

它似乎对我有用

Answer 3

如果您想为每个 p-calendar 设置特定格式，请在您的 main.ts 中添加：

import { Calendar } from 'primeng/calendar';
Calendar.prototype.getDateFormat = () => 'dd/mm/yy';

这只是一个丑陋的 hack，因为像这样的东西应该可以在某个地方配置。

Answer 4

到目前为止，我还没有发布答案，所以这是我设法让它发挥作用的答案。我使用了 pTemplate 并在模板中使用了 p-calendar 组件来更改日期格式。

<p-columnFilter [type]="col.type" [field]="col.field" display="menu" [showMatchModes]="true" [showOperator]="false" [showAddButton]="false">
     <ng-template pTemplate="filter" let-value let-filter="filterCallback">
          <p-calendar #calendar [ngModel]="value" (onSelect)="filter(calendar.value)" (onInput)="setup(calendar.value, col.field)" dateFormat="dd.mm.yy"></p-calendar>
     </ng-template>
</p-columnFilter>

在打字稿中，我在 table 上使用 ViewChild 设置了一个过滤器值，如下所示：

@ViewChild("dt") dataTableComponent: Table;

setup(value, id){
   if(value != null)
     this.dataTableComponent.filters[id][0].value = value;
 }

Answer 5

您可以通过配置 PrimeNgConfig 来做到这一点：

在您的 i18n 资产中（也可以只是一个打字稿常量）：

"primeng": {
    ...
    "dateFormat": "dd.mm.yy",
    ...
 }

然后在您的应用程序组件构造函数中注入 PrimeNgConfig：

private primeNgConfig: PrimeNGConfig

在ngOnInit中你可以设置配置：

this.translate.get('primeng').subscribe(res => this.primeNgConfig.setTranslation(res))

更多文档在此处： https://www.primefaces.org/primeng/i18n

如何更改 primeNG 数据表 p 列过滤器日期格式？

How to change primeNG datatable p-column filter date format?

primeng

angular