How to disable range of dates from selectedDate with p-calendar

Question

I'm working with p-calendar. When I select a random date, I want only a range of 15 dates to be selected and all the futures dates after this range. This is my code:

onSelect(event: Event) {
    const invalidDate = new Date();
        const selectedDate = new Date(minDate);
        const invalidDates: Date[] = []
        invalidDate.setMonth(selectedDate.getMonth());
        invalidDate.setDate(selectedDate.getDate() + 15);
        while (invalidDate <= maxDate) {
          invalidDates.push(new Date(invalidDate));
          invalidDate.setDate(invalidDate.getDate() + 1);
        }

and the template code

<p-calendar
        formControlName="dates"
        selectionMode="range"
        [maxDateCount]="2"
        [maxDate]="maxDate"
        [disabledDates]="invalidDates"
        (onSelect)="onSelect($event)"
      ></p-calendar>

after selecting selecting a random date, the future date after the range of 15 days are not disable even if I apply [disabledDates]="invalidDates" Any idea to make dates disabled by using my function ?

score 0 · Answer 1 · answered Feb 02 '23 at 08:25

In your code for the onSelect event handler, invalidDates is a local variable. Whatever you store in it is lost after the function finishes running and the component member invalidDates, which I assume you have, which is passed on to the p-calendar component, isn't updated with the new invalid dates.

You should have something like this:

onSelect(event: Event) {
    const invalidDate = new Date();
    const selectedDate = new Date(minDate);
    this.invalidDates = [];
    invalidDate.setMonth(selectedDate.getMonth());
    invalidDate.setDate(selectedDate.getDate() + 15);
    while (invalidDate <= maxDate) {
        this.invalidDates.push(new Date(invalidDate));
        invalidDate.setDate(invalidDate.getDate() + 1);
    }

How to disable range of dates from selectedDate with p-calendar

1 Answers1