PrimeNG日历未在模态中反映日期

Question

I am using PrimeNG Calendar control I am able to select and store date but when I fetch dates from say database and trying to set it by updating Modal. I am getting the following error :

<p-calendar  [(ngModel)]="bin.bidinstalledfrom" dateFormat="dd/mm/yy" 
[showTime]="true"  autocomplete="off" required name="BIDInstalledFrom" 
id="installedfrom" class="col-md-12"  ></p-calendar>

Component:

 this.bin.BIDInstalledFrom='17/05/2018'
;// I have hardcoded the date in component for the ease of development

I have tried dates in various formats. '17/05/2018 16:00', '17/05/2018','1526572848' etc

I have also tried changing the datatype of modal property bidinstalledfrom to string,date,number. Same issue. And since I am getting error, not only am I not able to set the date but also calendar doesn't work.

What am I missing here?

Answer 1

Primeng Calendar accepts Date object. So you have to convert your date string to JS date object. Eg:

new Date('17/05/2018');

And then assign it to your model.

Answer 2

For PrimeNG Calendar you need to use the JavaScript Date object and do the instantiation correctly. For instance with new Date('mm/dd/yyyy') (see https://www.w3schools.com/js/js_dates.asp and https://www.w3schools.com/js/js_date_formats.asp ).

Template:

<p-calendar [(ngModel)]="bin.bidinstalledfrom" 
            [showTime]="true"
            dateFormat="dd/mm/yy">
</p-calendar>

Component:

this.bin.bidinstalledfrom = new Date('05/17/2018');

You can find a working demo here: https://stackblitz.com/edit/prime-ng-calendar-38du98