PrimeNG calendar is not working as expected in Angular5

Question

I am using PrimeNG calendar for date of birth field. I am using yearNavigator and yearRange. The user can select max value is 12 years back before the current year.

<p-calendar formControlName="dob" class="" id="dob-registration" dateFormat="dd/mm/yy" placeholder="DD/MM/YYYY"
          readonlyInput="true" [monthNavigator]="true" [yearNavigator]="true" [yearRange]="dobYearRange" [maxDate]="maxYearDate"></p-calendar>

So I am assigning the values like

this.maxYearDate = new Date(new Date().setFullYear(new Date().getFullYear() - 12));
this.dobYearRange = '1900:' + (new Date().getFullYear() -12);

Now the year and month is coming from a dropdown as expected. But the problem is initially year dropdown's initial value is 1900 and showing current date all disabled status.

How can I set year drop down value is 12 years back and date exactly 12 years back ?

Answer 1

If you set a defaultDate with a value before your maxYearDate, you won't land on current date where days are disabled.

<p-calendar class="" id="dob-registration" dateFormat="dd/mm/yy" placeholder="DD/MM/YYYY"
          readonlyInput="true" [monthNavigator]="true" [yearNavigator]="true" [yearRange]="dobYearRange" [maxDate]="maxYearDate" [defaultDate]="maxYearDate"></p-calendar>

See StackBlitz