How to set calendar using PrimeNG calendar?

Question

I have a calendar control and I want to set some value to it, but I get the following error on the below line and value also does not get set.

this.data.dateIn = this.selecteddata.dateIn;

<p-calendar [(ngModel)]="data.dateIn" [showIcon]="true" name="dateInCalendar"   
             required #dateInCalendar="ngModel">
</p-calendar>

ERROR Error: Uncaught (in promise): TypeError: date.getMonth is not a function TypeError: date.getMonth is not a function at Calendar.webpackJsonp.../../../../primeng/components/calendar/calendar.js.Calendar.formatDate (calendar.js:649) at Calendar.webpackJsonp.../../../../primeng/components/calendar/calendar.js.Calendar.updateInputfield (calendar.js:252) at Calendar.webpackJsonp.../../../../primeng/components/calendar/calendar.js.Calendar.writeValue (calendar.js:595) at forms.es5.js:1779 at forms.es5.js:2965 at Array.forEach () at FormControl.webpackJsonp.../../../forms/@angular/forms.es5.js.FormControl.setValue (forms.es5.js:2965) at forms.es5.js:4367 at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:365) at Object.onInvoke (core.es5.js:3890) at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:364) at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.run (zone.js:125) at zone.js:758 at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:398) at Object.onInvokeTask (core.es5.js:3881) at Calendar.webpackJsonp.../../../../primeng/components/calendar/calendar.js.Calendar.formatDate (calendar.js:649) at Calendar.webpackJsonp.../../../../primeng/components/calendar/calendar.js.Calendar.updateInputfield (calendar.js:252) at Calendar.webpackJsonp.../../../../primeng/components/calendar/calendar.js.Calendar.writeValue (calendar.js:595) at forms.es5.js:1779 at forms.es5.js:2965 at Array.forEach () at FormControl.webpackJsonp.../../../forms/@angular/forms.es5.js.FormControl.setValue (forms.es5.js:2965) at forms.es5.js:4367 at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:365) at Object.onInvoke (core.es5.js:3890) at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:364) at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.run (zone.js:125) at zone.js:758 at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:398) at Object.onInvokeTask (core.es5.js:3881) at resolvePromise (zone.js:710) [angular] at :4200/polyfills.bundle.js:7469:17 [angular] at Object.onInvokeTask (core.es5.js:3881) [angular] at drainMicroTaskQueue (zone.js:591) [] at XMLHttpRequest.ZoneTask.invoke (zone.js:464) []

Answer 1

Solved the issue, providing the solution for helping others, Just convert selecteddata.dateIn to .toDate().

this.data.dateIn = this.selecteddata.dateIn.toDate();

Answer 2

TypeError: date.getMonth is not a function 

=> I think you are using the function to get the month from the date. But the date is invalid or wrong format. That's why your format function doesn't work.

With my idea, Please use moment.js to wrap your date first. example :

let selectedDate = moment(dateString);

If you want to get month, you just use :

let month = ("0"+(selectedEndDate.get("month")+1)).slice(-2);

Your format date is invalid with p-calendar. you can use and pass it to the Calendar:

this.currentDate = moment(new Date()).format('YYYY-MM-DD');