Date filter on table v18

[hm-kynecto]

Describe the bug

On selecting the date picker we get

Calendar component is deprecated as of v18, use DatePicker component instead.
core.mjs:7211 ERROR TypeError: Cannot read properties of undefined (reading 'addEventListener')
    at _DomEventsPlugin.addEventListener (platform-browser.mjs:846:13)
    at _EventManager.addEventListener (platform-browser.mjs:208:19)
    at NoneEncapsulationDomRenderer.listen (platform-browser.mjs:727:30)
    at AnimationRenderer.listen (browser.mjs:4340:26)
    at _Calendar.bindDocumentResizeListener (primeng-calendar.mjs:4685:51)
    at _Calendar.onOverlayAnimationDone (primeng-calendar.mjs:4170:16)
    at Calendar_div_3_Template_div_animation_overlayAnimation_done_0_listener (primeng-calendar.mjs:1317:36)
    at executeListenerWithErrorHandling (core.mjs:25794:12)
    at wrapListenerIn_markDirtyAndPreventDefault (core.mjs:25826:18)
    at browser.mjs:4422:28

https://v18.primeng.org/table says use

 <div class="flex items-center">
                    Date
                    <p-columnFilter type="date" field="date" display="menu" />
                </div>

how can we use the date filter in v18?

Environment

development env

"primeng": "^18.0.0-beta.1",

Reproducer

No response

Angular version

18

PrimeNG version

18

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

20.11.1

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

date filter should work

[cetincakiroglu]

Hi, this issue has been fixed with the v18.0.0-beta.2, could you please check and confirm?

[hm-kynecto]

@cetincakiroglu

the date picker now works correctly however my row contains date and time, when applying the filter and resetting it the visual data sets the hours to 00.00

I guess its related to this

#15684

also, how can I get the date picker to show the search in dd/mm/yyyy format? filtering works correctly but visually it flips to mm/dd/yyyy

[ray-kay]

Hi,

this is bug as described still exists in version 18.0.0 (stable), Angular 18.2.0:

<ng-template pTemplate="header" let-columns > <tr> @for (col of columns; track col) { <th scope="col" [pSortableColumn]="col.field" > {{ col.translation }} <p-sortIcon [field]="col.field" /> <p-columnFilter [type]="col.filterType" [field]="col.field" display="menu" hideOnClear="true" maxFractionDigits="5" /> </th> } </tr> </ng-template>