p-calendar: ngModel with a Date of type like 2024-01-02T17:34:02 won't be displayed (dateFormat="dd-M-yy")

[AIO1]

trafficstars

Describe the bug

I have the following p-calendar:

<p-calendar [(ngModel)]="data" [disabled]="true" [showButtonBar]="true" [touchUI]="true" [showTime]="true" [showSeconds]="true" [style]="{'width': '100%'}" appendTo="body" inputId="dateCreated" dateFormat="dd-M-yy"/>

The "data" is declared as a date and from a MSSQL database, it is being assigned a datetime2 value like 2024-01-02T17:34:02 With this, p-calendar won't display anything. It will however display the date if this is done: data = new Date("2024-01-02T17:34:02");

Is this an expected behaviour?

Environment

Development

Reproducer

No response

Angular version

17

PrimeNG version

17.3.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

v20.10.0

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

No response

[Urtgard]

By default data must be a Date. That's why data = new Date("2024-01-02T17:34:02") works.

You could use dataType = "string" but as far as I know your data's format must match dateFormat. This means data = "02-Jan-2024" works but data = "2024-01-02T17:34:02" fails.

[axos88]

The entire component should be refactored so that it's more flexible on input parsing and output formatting, so that ISO date formats are supported.

Parsing the field value and formatting the output value should be separate from formatting the displayed value. I'd like to keep the value strings as ISO formats, much like OP, and would like to display YY-MM-DD HH:MM for the user.

[villegasrfael]

This is a bug that comes and goes between versions, 90% of the backends return dates as ISO Date String, it is ridiculous that dates have to be converted from ISO string to date before consuming PrimeNg components, and then back to ISO date string before sending to backend. This happens with almost all components that use dates. Please make components able to consume Date() and/or ISO Date string indistinctly. :pray:

[mertsincan]

Hi,

So sorry for the delayed response! Improvements have been made to many components recently, both in terms of performance and enhancement. Therefore, this improvement may have been developed in another issue ticket without realizing it. You can check this in the documentation and try the latest PrimeNG version(v19). If there is no improvement on this, can you open a new issue so we can include it in our roadmap?

Thanks a lot for your understanding! Best Regards,