在角度材料 DatePicker 中突出显示特定月份的特定星期答案

【问题标题】：Highlight a particular week of a particular month in angular material DatePicker在角度材料 DatePicker 中突出显示特定月份的特定星期
【发布时间】：2020-10-09 10:47:39
【问题描述】：

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

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

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

api中有一个叫DateRange的类，但是在哪里绑定呢？

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

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

一个 stackblitz 示例将不胜感激..!!

【问题讨论】：

您必须告诉我们您为我们做了哪些尝试才能提供帮助！ :) 神速
函数dateClass 是一个函数，它接收一个日期作为参数并返回一个带有类的字符串（当我们更改月份时，它每天都会执行）。如果cellDate 满足您的条件，则唯一的条件是返回带有类名称的字符串。注意：不要忘记将类放在 styles.css 中，而不是在 component.css 中
@FranciscoSantorelli，我在 Angular 材料 Api 中看到了 DateRange 类，但是在 www 我找不到一个直接的示例，可以解释如何准确地为 Angular 材料提供范围日期范围选择器： ) 有些示例仅显示与映射的输入字段的集成，但不幸的是，这不能满足我的需求。如果您需要更多信息，请告诉我。还寻找了 saturn-datepicker，但很难输入模块依赖项。
用我的输入更新了问题:)

标签： angular angular-material angular-material-7 angular-material-datetimepicker

【解决方案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 来获取所选日期的值。

还有一个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>

【讨论】：

您好，感谢您的提示，但如何选择特定月份，例如 1 月的 20 天？因为我想选择特定月份的特定日期。
是的，这对我有用，但如何设置静态值？就像我计划在 10 月 6 日到 12 日开会一样，所以我想在这里设置预定义的值，这里的任何线索都可以完成我的工作，因为我将隐藏日期范围输入或者禁用它们。
如果您提供如何设置和从中获取值会很棒..!!这其实是我想要的..!!
我更新了答案。您可以检查第二次编辑。
我完全了解这个例子，但我的问题是我想在不使用表单输入的情况下设置范围......只是我将拥有来自后端的两个日期，我需要显示所选范围，但我不会在那里保留输入...!!?