how to bind calendar control from primeng to the columns of a table using V9 of the control

[bilpor]

I have a primeNg table with a header and body. The header takes the form:

Code: Select all

<p-table id="tblRequestResponse" name="tblRequestResponse" [value]="requestResponseSummaries" [rows]="10" [paginator]="true" [columns]="cols" sortField="dateTime" [pageLinks]="3" selectionMode="single" sortOrder="-1" #dt>
    <ng-template pTemplate="header" let-columns>
      <tr>
        <th *ngFor="let col of columns" [pSortableColumn]="col.field" [ngSwitch]="col.field">
          <div *ngSwitchCase="'id'">
            {{col.header}} <p-sortIcon [field]="col.field"></p-sortIcon>
            <p>
              <input pInputText type="text" (input)="dt.filter($event.target.value, col.field,'contains')" styleClass="ui-column-filter" />
            </p>
          </div>
          <div *ngSwitchCase="'dateTime'">
            {{col.header}} <p-sortIcon [field]="col.field"></p-sortIcon>
              <p-calendar appendTo="body" styleClass="ui-column-filter" dateFormat="dd/mm/yy" [(ngModel)]="filterValue[col.field]" (onSelect)="dt.filter($event,col.field,col.filterMatchMode)" (input)="dt.filter($event.target.value,col.field,col.filterMatchMode)"></p-calendar>
          </div>
          <div *ngSwitchCase="'process'">
            {{col.header}} <p-sortIcon [field]="col.field"></p-sortIcon>
            <p>
              <p-dropdown appendTo="body" editable="true" [(ngModel)]="filterValue[col.field]" [options]="searchOptions.processOptions" (onChange)="dt.filter($event.value,col.field,col.filterMatchMode)" styleClass="ui-column-filter"></p-dropdown>
            </p>
          </div>
          <div *ngSwitchCase="'requestorIdentity'">
            {{col.header}} <p-sortIcon [field]="col.field"></p-sortIcon>
            <p>
              <input pInputText type="text" (input)="dt.filter($event.target.value, col.field,'contains')" styleClass="ui-column-filter" />
            </p>
          </div>
        </th>
      </tr>
    </ng-template>

and the body:

Code: Select all

<ng-template pTemplate="body" let-rowData let-columns="columns">
      <tr>
        <td *ngFor="let col of columns" [ngSwitch]="col.field">
          <div *ngSwitchCase="'id'">
            {{rowData[col.field]}}
          </div>
          <div *ngSwitchCase="'dateTime'">
            {{rowData[col.field] | datexutc:'DD/MM/YYYY HH:mm:ss'}}
          </div>
          <div *ngSwitchCase="'process'">
            {{rowData[col.field]}}
          </div>
          <div *ngSwitchCase="'requestorIdentity'">
            {{rowData[col.field]}}
          </div>

        </td>
      </tr>
    </ng-template>

My column sorting using the p-sortIcon tags in the grid, all work and filtering works on all my columns except the date column ().

My code at the moment, correctly displays the calendar control, but when I select a date the grid doesn't display filtered data when I select a valid date. Can anyone advise what else I need to do on my date column to make it filter correctly on that column. There's scant documentation for this on the PrimeNG Website.