Search code examples
angulartypescriptprimengprimeng-calendar

PrimeNG p-calendar - disableDate format


I want to disable the dates from primeNG calendar.

<p-calendar [(ngModel)]="dateValue" dateFormat="dd.mm.yy" [disabledDates]="[here are the dates]"></p-calendar>

For example I want to disable the dates from calendar except today and tomorrow.


Solution

  • Instead of using disabledDates, you should use minDate and maxDate that way :

    HTML

    <p-calendar [(ngModel)]="dateValue" [minDate]="minDateValue" [maxDate]="maxDateValue" readonlyInput="true"></p-calendar>
    

    TS

    this.minDateValue = new Date();
    this.maxDateValue = new Date(new Date().getTime() + 24 * 60 * 60 * 1000);
    

    See StackBlitz