Disable PrimeNG Calendar month selection in Typescript

Question

I am using PrimeNg Calendar in my angular 7 project, wanted to disable month navigator on some conditions at the component level. Ex: Current Month is February, I want to disable month navigator after the march month.

Using :host and ::ng-deep I can override Primeng styles in CSS file

:host ::ng-deep .ui-datepicker .ui-datepicker-header .ui-datepicker-next{  
 display:none;

}

But I want to do the changing styles in the component. Tried below code, but not working

   let datePickerNext = document.querySelectorAll('.ui-datepicker .ui-datepicker-header .ui-datepicker-prev');
datePickerNext.forEach(element => {
  element.setAttribute("style", " margin-top: 0.6em;opacity: 0.2;");
});

Any ideas to achieve this

Answer 1

Did you ever come up with a solution? I had a similar use case on a project, and someone on my team came up with this. It appears to work on Chrome/Edge. In your TypeScript, simply apply either or both classes on the p-calendar (ui-datepicker-prev-disable or ui-datepicker-next-disable).

:host ::ng-deep p-calendar.ui-datepicker-next-disable .ui-datepicker .ui-datepicker-header .ui-datepicker-next {
  color: #dddddd !important;
  pointer-events: none;
}

:host ::ng-deep p-calendar.ui-datepicker-prev-disable .ui-datepicker .ui-datepicker-header .ui-datepicker-prev {
  color: #dddddd !important;
  pointer-events: none;
}

I also added an event handler for onMonthChange just in case anyone managed to re-enable the icons.

In the HTML template I added this binding. minMonth and maxMonth are variables set in ngOnInit and are based on the minimumDate and maximumDate.

<p-calendar #calendar
   [ngClass]="{
     'ui-datepicker-prev-disable': calendar.currentMonth === minMonth, 
      'ui-datepicker-next-disable': calendar.currentMonth === maxMonth}"