how to use PrimeNG calendar with yearNavigator (doesn't work)

Question

I wanted to use the primeng calendar with month and year selector. I copy-paste the code example from their site, but I don't see the year selector. My Dependencies:

"primeicons": "^1.0.0", "primeng": "^6.1.2",

<p-calendar view="month" dateFormat="mm/yy"
    [yearNavigator]="true" yearRange="2000:2030">
</p-calendar>

I can see only the months.

any ideas?

this code is exactly how they use it in their example, which display months, and a year selector. so I'm not sure this is the problem... https://www.primefaces.org/primeng/#/calendar — tal faran, Apr 10 '19 at 06:09
yes i found try to put it a ngModel something like ```this.value = new Date();``` and test `````` — Fateme Fazli, Apr 10 '19 at 06:14
you are right, the ngmodel does seems to be the issue. didn't think much of it, since I give the range of the years manually — tal faran, Apr 10 '19 at 06:19
i didn't think that, tested an example. so i post it as an answer. — Fateme Fazli, Apr 10 '19 at 06:21

score 8 · Accepted Answer · answered Apr 10 '19 at 06:25

8

try to give it a ngModel then it will be shown correctly: ts:

public value;
constructor() {   
  this.value = new Date();
}

html:

<p-calendar [(ngModel)]="value" view="month" dateFormat="mm/yy" [yearNavigator]="true" yearRange="2000:2030"></p-calendar>

DEMO.

answered Apr 10 '19 at 06:25

Fateme Fazli

11,582
2
31
48

What about using it with in a Form with formControleName? – Mehdi Nov 27 '19 at 14:25
1

If you are using this component in a Form, then setting the yearRange seems to work too without setting a current date value – Mehdi Nov 27 '19 at 14:31
Ofcourse it can be used in reactive form and formControl as model and there is no need to use ngModel, yearRange isn't related to value. – Fateme Fazli Nov 27 '19 at 14:41
The question is not whether we can use the calendar in a form or not. The question is how to display the Year drop down list as it doesn't work in you don't add the yearRange attribute. Problem solved thanks to your response! Thanks – Mehdi Nov 27 '19 at 14:43

how to use PrimeNG calendar with yearNavigator (doesn't work)

1 Answers1