1

我在angular material的官网看到了这个例子

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

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

api中有一个名为DateRange的类，但是如何在哪里绑定呢？

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

PS 还尝试了土星日期范围选择器，但它令人困惑的是要添加更多的模块和依赖项。

一个stackblitz的例子将不胜感激..!!

4

1 回答 1

1

在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来获取选定日期的值。

还有另一个工作示例。

<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>
于 2020-10-09T10:57:58.907 回答