12

I'm using calendar input as follows. 

<p-calendar  maxDate="dateTime" showTime="true" hourFormat="12" showButtonBar="true" [(ngModel)]="dateTime" name="timeOfUse" required #timeOfUse="ngModel">
          </p-calendar>

I want to disable future dates in this datepicker. It may be a simple property, but I can't figure it out. Appreciate any help

zgue
  • 3,793
  • 9
  • 34
  • 39
Channa
  • 3,267
  • 7
  • 41
  • 67

2 Answers2

13

You're not so far ! Just add square brackets to maxDate and it will work :

<p-calendar  [maxDate]="dateTime" showTime="true" hourFormat="12" showButtonBar="true" [(ngModel)]="dateTime" name="timeOfUse" required #timeOfUse="ngModel">
</p-calendar>

And if you want to disable dates 3 days after today for instance :

export class AppComponent {

   dateTime = new Date();

   constructor() {
     this.dateTime.setDate(this.dateTime.getDate() + 3);    
   }


}
Antikhippe
  • 6,316
  • 2
  • 28
  • 43
2

Found this on web might help you,Read the topic Disable specific dates and/or days

Date Restriction

[maxDate]="maxDateValue"

https://www.primefaces.org/primeng/#/calendar

Reference

https://forum.primefaces.org/viewtopic.php?f=35&t=49578

Nisal Edu
  • 7,237
  • 4
  • 28
  • 34