0

I'm trying to apply a css changes on a specific dates in a datepicker in angular

I tried this but it did not work, using 'console.log(highlightDate);' gave that dateClass() returns the right dates but the style does not apply

html

<mat-form-field appearance="fill">
     <mat-label>Date de retour</mat-label>
   <input matInput [matDatepicker]="picker2" [(ngModel)]="date_retour"  name="inputcalendar2">
   <mat-hint>MM/JJ/YYYY</mat-hint>
   <mat-datepicker-toggle matIconSuffix [for]="picker2"></mat-datepicker-toggle>
   <mat-datepicker [dateClass]="dateClass" #picker2></mat-datepicker>
</mat-form-field>

component.ts

highlightedDates = [new Date('04/17/2023'), new Date('04/05/2023'), new Date('04/15/2023')];
dateClass = (date: Date): MatCalendarCellCssClasses => {
    var highlightDate = this.highlightedDates.find(d => d.getTime() === date.getTime());
    console.log(highlightDate);
    return highlightDate ? 'highlighted-date' : '';
  }

css

.highlighted-date 
{  
    background: rgb(224, 245, 255);
}
F4rou9 21
  • 1

1 Answers1

0

Try using ::ng-deep or maybe this could help Customizing Angular Material component styles

René
  • 101
  • 2
  • 5