I am attempting to prevent users from selecting future dates and visually distinguish them by setting a grey color background. However, I am having trouble disabling the future dates while the grey color background is functioning correctly. Any ideas on how to address this issue?
HTML file:
<p-calendar [(ngModel)]="dateInDateFormat" [monthNavigator]="true"
[yearNavigator]="true" yearRange="1970:2099" [dateFormat]="const.dateFormatCal"
formControlName="daateFromControl" dataType="string">
<ng-template pTemplate="date" let-date>
<div *ngIf="checkFutureDate(date);then highlightedDate else normalDate"></div>
<ng-template #highlightedDate>
<span [ngStyle]="{backgroundColor: 'inherit'}" style="border-radius:75%">{{date.day}}</span>
</ng-template>
<ng-template #normalDate>
<span [ngStyle]="{backgroundColor: '#d3d3d3'}" style="border-radius:75%">{{date.day}}</span>
</ng-template>
</ng-template></p-calendar>
TypeScript:
checkFutureDate(date:any){
var calendarDate = new Date(date.year,date.month,date.day);
calendarDate.setHours(0,0,0,0);
console.log(""+calendarDate+""+(calendarDate < this.todayDate));
return calendarDate < this.todayDate;
}
output:
https://i.sstatic.net/RBDS6.png
I have tried using [maxDate]="todayDate", which successfully disables future dates but does not apply the grey color background. Can someone provide any suggestions or solutions?