CODEWITHSUNDEEP
angularprimeng
Kruno
Kruno

Reputation: 159

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

How and is it possible to change date format when filtering by date?

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

Default format is mm/dd/yyyy but I want to achieve dd/mm/yyyy

Upvotes: 4

Views: 19278

Answers (5)

Stefan
Stefan

Reputation: 1372

You can do this by configuring the PrimeNgConfig:

in your i18n assets (could also be just a typescript constant):

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

Then inject PrimeNgConfig in your app components constructor:

private primeNgConfig: PrimeNGConfig

In ngOnInit you can set the configuration:

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

More documentation on here: https://www.primefaces.org/primeng/i18n

Upvotes: 6

Vu Duong
Vu Duong

Reputation: 1

<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>

It seem to work for me

Upvotes: 0

Kruno
Kruno

Reputation: 159

So far I haven't posted an answer so here is the one I managed to get it work. I've used pTemplate and inside a template I used p-calendar component to change date format.

<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>

and in typescript I setup a filter value using ViewChild on table like this:

@ViewChild("dt") dataTableComponent: Table;

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

Upvotes: 1

no use for a name
no use for a name

Reputation: 658

If you would like to set certain format for every p-calendar, in your main.ts add this:

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

It's just an ugly hack, because things like this should be configurable somewhere.

Upvotes: 4

Lucas Paix&#227;o
Lucas Paix&#227;o

Reputation: 981

if you are using "p-columnFilter" component, this means that you are inside the p-table, and you want to filter the value according to the filter

You can use this:

<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>

Explanation:

I am customizing the Design of the field filter, to accomplish this:

Within "p-columnFilter" I add (ng-content) the with the pTemplate directive set to "filter".

I also get the "filterCallback" function aliased to "filter"

Example code:

<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>

The "anyname" function is the alias for the "filterCallback" function, and when called, the filter of the p-columnFilter component will be applied.

What I'm doing is: customizing the Design and calling the filter (filterCallback) of the p-columnfFilter component with a certain value

If you still have any questions, please comment that I will try to help;

Important: You can format only the date display using the PrimeNG component called: , with the dateFormat input

Example:

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

Upvotes: 0

Related Questions