how to filter date mm/dd/yyyy from passing any number from text input in angular 10 with primeng

Question

I did use primeng filter on turbo table but its not working with date which is having format "mm/dd/yyyy".

                   *ngIf="col.field === 'abc'"
                   pInputText
                   type="text"
                   (input)="
                     dt.filter(
                       $event.target.value,
                       'abc',
                       'contains'
                     )
                   "
                   class="p-column-filter"
                 />

but it only works with number if I type in text box if I am entering "/" then it doesnt work.

I need a filter who can show result as per matching data from input and input is "07/02/2019 01:30:00"

its mm/dd/yyyy format

Could anyone help me into this?

Is there another way to solve this issue?

Thanks

Answer 1

Perhaps, you can use the p-calendar element instead of an input: Calendar. It would be like this:

<p-calendar [ngModel]="value"  dateFormat="dd/mm/yy" showTime="true" hourFormat="12" (ngModelChange)="dateChange($event)">
</p-calendar>

And in your typescript code, you add:

dateChange($event) {
    if ($event) {
      //You call method filter
      dt.filter($event.target.value,'abc','contains')
    }
  }

I hope it helps you. Greetings!

Answer 2

I have added a function (onSelect)="filterByDate($event, dt2)", here i passed selected date and table.

<p-columnFilter type="date" field="processedDate" display="menu">
    <ng-template pTemplate="filter" let-filter="filterCallback">
        <p-calendar dateFormat="dd/mm/yy" (onSelect)="filterByDate($event, dt2)"></p-calendar>
    </ng-template>
</p-columnFilter

component.js file contains below implemenation

filterByDate(event: any, table: any) {
    let formattedDate = this.datePipe.transform(event, 'yyyy-MM-dd')
    table.filterGlobal(formattedDate, 'customContains');
}

Here I have implemented customContains filter, which is similar to contains filter; It works for both globalfilter and datefilter;