Restrict multiple dates in date picker

2019-08-29 12:33发布

问题:

I have a calendar and I want certanin dates to be disabled, am using https://www.primefaces.org/primeng/#/calendar

in html i have this

<p-calendar formControlName="date"  [inline]="true" [disabledDates]="restictedBookingDates"  [minDate]="minimumDate" tabindex="0" readonlyInput="true">
                <ng-template pTemplate="date" let-date>
                    <span [ngStyle]="{backgroundColor: (date.day ==10) ? '#7cc67c' : 'inherit'}"   style="border-radius:50%">{{date.day}}</span>
                </ng-template>
            </p-calendar>

in compo.ts i have

 restictedBookingDates: Array<Date>; 

 ngOnInit() {
    const today = new Date();
    const invalidDate = new Date();
    invalidDate.setDate(today.getDate() - 1);
    this.restictedBookingDates = [today, invalidDate];
  }

This restrict only todays date, I want to be able to restrict multiple dates eg

var restictedBookingDates= ["7-15-2018", "7-23-2018", "7-23-2018"];

what do I need to change in my code to acomplish what I want?

回答1:

Create an array of your restricted dates, like so:

restrictedBookingDates = [
    new Date(2018, 6, 23),
    new Date(2018, 6, 17)
];

This would restrict bookings on the 23rd and 17th of July. Please note that the month options is zero based, so 6 represents July.

Here is a StackBlitz example