Календарь PrimeNG не отражает дату в модальном

Question

Я использую управление календарем PrimeNG. Я могу выбрать и сохранить дату, но когда я получаю даты из, скажем, базы данных и пытаюсь установить ее, обновляя Модал. Я получаю следующую ошибку:

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

Компонент:

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

Я пробовал даты в разных форматах. '17 / 05/2018 16:00, '17 / 05/2018 ',' 1526572848 'и т. Д.

Я также попытался изменить тип данных модального свойства bidinstalledfrom на строку, дату, число. Та же проблема. И поскольку я получаю сообщение об ошибке, я не только не могу установить дату, но и календарь не работает.

Что мне здесь не хватает?

Answer 1

Для PrimeNG Calendar вам необходимо использовать объект JavaScript Date и правильно выполнить его создание. Например, с new Date('mm/dd/yyyy') (см. https://www.w3schools.com/js/js_dates.asp и https://www.w3schools.com/js/js_date_formats.asp).

Шаблон:

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

Компонент:

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

Рабочее демо можно найти здесь: https://stackblitz.com/edit/prime-ng-calendar-38du98

Answer 2

Primeng Calendar принимает объект Date. Таким образом, вы должны преобразовать вашу строку даты в объект даты JS. Например:

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

А затем назначьте его вашей модели.