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) []

@Sajeetharan Seems it's from primeng https://github.com/primefaces/primeng/blob/master/src/app/components/calendar/calendar.ts#L1235 — yurzui, Sep 16 '17 at 10:51
I see you are a .Net developer. Cool you are PrimeFaces on that platform. Did not know you could run JSF or, more generic, java code on .Net... — Kukeltje, Sep 16 '17 at 11:04

score 3 · Accepted Answer · answered Sep 26 '17 at 09:09

3

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

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

answered Sep 26 '17 at 09:09

Vivek Nuna

25,472
25
109
197

score 2 · Answer 2 · edited Sep 26 '17 at 09:14

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');

How to set calendar using PrimeNG calendar?

2 Answers2