在角形材质DatePicker中突出显示特定月份中的特定星期

如何解决在角形材质DatePicker中突出显示特定月份中的特定星期

我在角材料的官方网站上看到了这个例子

https://stackblitz.com/angular/xxjleavorkm?file=src%2Fapp%2Fdatepicker-date-class-example.ts

如何动态选择日期，例如，如果我安排从10月7日到14日召开例行会议，如何突出显示日期。

api中有一个名为Daterange的类，但是如何在绑定它的地方使用它？

有些示例仅显示有角材料“日期范围”选择器与带有标为“开始”和“结束”的表单控件的输入字段的集成，这些控件可能采用日期范围的输入，但是在我的情况下，我想提供来自后端的预定义输入，就像我将需要在日期范围选择器中直接设置的开始日期和结束日期一样。

P.S还尝试过使用土星日期范围选择器，但它令人困惑，因为要添加更多模块和依赖项。

不胜枚举的例子。.

解决方法

在Stackblitz中，这样更改。

      return (date > 1 && date < 20) ? 'example-custom-date-class' : '';

编辑：

因此，您正在寻找日期范围选择器。

https://stackblitz.com/angular/ovmarbmryxd?file=src%2Fapp%2Fdate-range-picker-overview-example.ts

编辑2：

您可以使用formControlName来获取所选日期的值。

还有另一个working example。

<mat-form-field appearance="fill">
  <mat-label>Enter a date range</mat-label>
  <mat-date-range-input [formGroup]="range" [rangePicker]="picker">
    <input matStartDate formControlName="start" placeholder="Start date">
    <input matEndDate formControlName="end" placeholder="End date">
  </mat-date-range-input>
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-date-range-picker #picker></mat-date-range-picker>

  <mat-error *ngIf="range.controls.start.hasError('matStartDateInvalid')">Invalid start date</mat-error>
  <mat-error *ngIf="range.controls.end.hasError('matEndDateInvalid')">Invalid end date</mat-error>
</mat-form-field>

<p>Selected range: {{range.value | json}}</p>