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

[maxdate] disabled dates beyond that. here i need to disable Month Navigators(< ,>) — user2038538, Mar 02 '20 at 07:29

MikeC · Answer 1 · 2022-05-04T15:00:29.010

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}"

score 0 · Answer 2 · answered Dec 16 '22 at 01:25

Yes. It can be achieved either by hiding or blurring the navigation arrows. Need to use onMonthChange, pass the event, based on event apply the CSS changes to hide navigation arrow.

Below is the code:

HTML:

<p-calendar [(ngModel)]="date4" [minDate]="minDate" [maxDate]="maxDate" 
    [readonlyInput]="true" inputId="min-max" 
    (onMonthChange)="disableDatePickerPrev($event)"
    [ngClass]="{'disable-datepicker-prev': disabled}">
</p-calendar>

Here onMonthChange has been used, created a function which will pass the event to apply the CSS dynamically.

Typescript:

disabled:boolean = false;
disableDatePickerPrev(evt){
    // current month december =12
    // disable prev month navigation for october =10
    // can set month value dynamically
    if(evt.month <= 10) this.disabled=true;
}

CSS:

p-calendar.disable-datepicker-prev ::ng-deep .p-datepicker-prev {
    display: none;
}

Disable PrimeNG Calendar month selection in Typescript

2 Answers2