Angular Material Datepicker DateClass-CodePudding

How can i update dateClass manually in a function? datepicker

HTML

<mat-datepicker
    [dateClass]="dateClass"
    #picker
    fxLayoutAlign="start start"
    (opened)="appendFooter()"
  >
  </mat-datepicker>

dateClass: MatCalendarCellClassFunction<Date> = (cellDate, view) => {
...
};

CodePudding user response：

html:

<mat-date-range-picker #rangePicker [dateClass]="dateClass"></mat-date-range-picker>

ts:

export class SomeComponent {
  dateClass = (d: Moment) => {
    let classes = [];
    if (moment().year() === d.year() && (this.ds?.weekEnds?.weekends?.length > 0 || this.ds?.weekEnds?.shorts?.length > 0)) {
      if (this.ds?.weekEnds?.weekends?.length > 0 &&
        this.ds.weekEnds.weekends.indexOf(d.format('YYYY-MM-DD')) !== -1
      )
        classes.push('weekend');
      else if (this.ds?.weekEnds?.shorts?.length > 0 &&
        this.ds.weekEnds.shorts.indexOf(d.format('YYYY-MM-DD')) !== -1
      )
        classes.push('highlight');
    } else {
      const dayOfIsoWeek = d.isoWeekday();
      if ([6,7].indexOf(dayOfIsoWeek) !== -1) classes.push('weekend');
    }
    return classes;
  }
}

I was highlighting short working days and make red day number for weekend in russia for current year

P.S. i used @angular/material-moment-adapter & moment packages for mat-date components

CodePudding user response：

One aproach can be you binding the dateclass to a function that return a function (date: Date)=>string|null)

Imagine some like

dateClass(type:any) {
    switch (type)
    {
       case 0:
         return (date: Date): MatCalendarCellCssClasses => {
           ...
         }
         break
       case 1:
         return (date: Date): MatCalendarCellCssClasses => {
           ...
         }
         break
}

You can to have a variable type and use

 <mat-datepicker [dateClass]="dateClass(type)">...</mat-datepicker>

But take account that the "dateClass" function is executed only when you open the datepicker or when you change the month (one time for each day)

I feel you're looking for some like this SO. Well, you can take the aproach and call to the function "changeMonth" when you make a click