How to disable future dates in calendar using Angular 2+ reactive form

Question

I am working on calendar. I want to set maximum date as today and disable future dates.

HTML

 <div [ngClass]="setClassDOB()">
 <input type="date" formControlName="dob" name="dob">
 </div>

What should I do in component side(TS)?

Answer 1

In your ts file define next function:

getToday(): string {
   return new Date().toISOString().split('T')[0]
}

And in html bind max as follow

<input type="date" formControlName="dob" name="dob" [max]="getToday()">

and if you want to disable past dates and show the calendar from today's date then just change [max] to min [min]...it will work