Блог

У меня есть требование, чтобы пользователь мог выбрать несколько дат в средстве выбора дат. Как я могу реализовать функцию выбора нескольких дат в средстве выбора дат углового материала для календаря года? Я поделился двумя изображениями, ниже ожидается одно.

Я получаю один и тот же месяц во всех месяцах, так как я не могу найти правильное свойство для привязки месяца по умолчанию в mat-календаре

Я попробовал это с помощью мат-календаря. Для календаря года я использовал директиву ngFor.

HTML-код :

 <mat-grid-list cols="4" rowHeight="260px"  [gutterSize]="'3px'">
<mat-grid-tile *ngFor="let _ of [1,2,3,4,5,6,7,8,9,10,11,12]">

    <div (click)="$event.stopPropagation()">
        <mat-calendar #calendar (selectedChange)="select($event,calendar)" [dateClass]="isSelected">
        </mat-calendar>
    </div>

</mat-grid-tile>
 

Файл TS:

   daysSelected: any[] = []; event: any;
isSelected = (event: any) => {
const date =
  event.getFullYear()  
  "-"  
  ("00"   (event.getMonth()   1)).slice(-2)  
  "-"  
  ("00"   event.getDate()).slice(-2);
return this.daysSelected.find(x => x == date) ? "selected" : null; };


  select(event: any, calendar: any) {
console.log();
const date =
  event.getFullYear()  
  "-"  
  ("00"   (event.getMonth()   1)).slice(-2)  
  "-"  
  ("00"   event.getDate()).slice(-2);
const index = this.daysSelected.findIndex(x => x == date);
if (index < 0) this.daysSelected.push(date);
else this.daysSelected.splice(index, 1);
calendar.updateTodaysDate();  }