Search code examples
angularprimengprimeng-calendar

Why PrimeNG p-calendar doens't show the value of the date?


I am finding the following problem using PrimeNG Calendar component.

Into the HTML view of my Angular component I have defined this PrimeNG component tag:

<p-calendar [disabled]="disabled"
            [(ngModel)]="orderDetail.dettaglio_ordine.data_inserimento"
            dateFormat="yyyy-mm-dd"></p-calendar>

This should view the date contained into a JSON object field identified by orderDetail.dettaglio_ordine.data_inserimento. This field contains the following value: 2020-08-08"

Infact in my JSON I have:

"data_inserimento": "2020-08-08",

the problem is that doing in this way this date is not shown into the rendered form that is empty.

Why? What is wrong? What am I missing? How can I fix this issue?


Solution

  • you need to change the value from string to date , p-calendar value must be date so after you get the value from the api try to change it to date.

      data_inserimento = new Date("2020-08-08");
    

    demo 🚀🚀