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

问题描述：

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

I saw this example in the official website of angular material

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

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

How to select the dates dynamically like If I have scheduled a meeting of say October from date 7 to 14 how to highlight the days for it.

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

There is a class called DateRange in the api but how to use it where to bind it?

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

There are examples only showing the angular materials Date Range picker integration with the input fields with form controls labelled as 'start' and 'end' that are probably taking the inputs of the date range but in my case I want to provide the predefined input from the backend like I would be having a start date and end date which i need to set directly in the date range picker.

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

P.S Also tried with saturn date Range picker but its confusing having lot more modules and dependencies to be added.

不胜枚举的例子.. !!

A stackblitz example would be appreciated..!!

答

在

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

So, you are looking for a date range selector.

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

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

You can use formControlName to get the value of selected dates.

还有另一个工作示例.

<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>

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

相关推荐