Got it, let's solve this problem right away! The key here is that PrimeNG's disabledDates property doesn't just accept a static array of dates—it can also take a custom function that dynamically checks each date to decide if it should be disabled. This is perfect for your use case where you want to allow only today and tomorrow.

Step 1: Create helper functions to get clean today/tomorrow dates #

First, we need to generate date objects for today and tomorrow with the time portion set to midnight. This avoids mismatches caused by the time component of date objects (like if a date has 14:30:00 vs our target midnight time).

Add these to your component class:

// Get today's date normalized to midnight
getToday(): Date {
  const today = new Date();
  today.setHours(0, 0, 0, 0);
  return today;
}

// Get tomorrow's date normalized to midnight
getTomorrow(): Date {
  const tomorrow = new Date();
  tomorrow.setDate(tomorrow.getDate() + 1);
  tomorrow.setHours(0, 0, 0, 0);
  return tomorrow;
}

Step 2: Write the date disable logic #

Next, create a function that takes a date as input and returns true if the date should be disabled (i.e., it's not today or tomorrow).

Add this function to your component class:

shouldDisableDate(date: Date): boolean {
  const targetDate = new Date(date);
  targetDate.setHours(0, 0, 0, 0); // Normalize the input date to midnight
  
  const today = this.getToday();
  const tomorrow = this.getTomorrow();
  
  // Return true to disable dates that are NOT today or tomorrow
  return targetDate.getTime() !== today.getTime() && targetDate.getTime() !== tomorrow.getTime();
}

Step 3: Update your p-calendar template #

Now bind this function to the [disabledDates] property of your p-calendar. Note that we pass the function reference directly, not a call to the function.

Your template will look like this:

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

How this works #

• The shouldDisableDate function runs for every date displayed in the calendar.
• Normalizing all dates to midnight ensures accurate comparisons (since date objects include time by default).
• If the date is neither today nor tomorrow, we return true to disable it—otherwise, false allows the user to select it.

Bonus edge case handling #

If you need to account for timezone differences, you can adjust the date normalization to use UTC time instead of local time. For most standard local use cases, though, the code above will work perfectly.

内容的提问来源于stack exchange，提问作者Noah Tony