Angular 2 材质日期选择器突出显示特殊日子答案

【问题标题】：Angular 2 material datepicker highlight special daysAngular 2 材质日期选择器突出显示特殊日子
【发布时间】：2018-02-20 15:30:09
【问题描述】：

我一直在寻找一种在日历中标记特殊日子的方法，以用户。我知道您可以在日期选择器中禁用某些日子，但我会喜欢能够标记/设置特定日期，例如更改背景/颜色在具有特殊值的日期（例如假期）上变为红色，而不是禁用它们。

我还没有找到任何方法来做到这一点，如果我错过了一些明显的东西，对不起。有没有人找到一种方法来做到这一点，或者在这种情况下制作我自己的日期选择器更容易？

【问题讨论】：

您能否提供指向您正在使用的确切软件包的链接？此外，如果没有可用的 API 来执行您正在执行的操作，您可以简单地挂钩到 datepicker 的“打开”回调并查询 DOM 以查找具有特定值的日期，并以这种方式在这些元素上设置类.
我正在使用角度材料 datepicker link ，我不确定如何挂钩回调，你有一个例子吗？

标签： angular datepicker angular-material

【解决方案1】：

如果您查看打开的日期选择器的 HTML，您会看到每一天都由 td 表示，如下所示：

<td class="mat-calendar-body-cell ng-star-inserted" role="gridcell" tabindex="-1" aria-label="February 4, 2018" style="width: 14.2857%; padding-top: 7.14286%; padding-bottom: 7.14286%;"><div class="mat-calendar-body-cell-content">4</div></td>

我们可以从该 HTML 中得到一个 aria-label 和一个 mat-calendar-body-cell 类。

要实现您想要的，您可以使用@Output() openedStream 事件。这将在日历打开时触发。

根据文档：@Output('opened') openedStream: EventEmitter<void>。

收到事件后，您可以通过 mat-calendar-body-cell 类查询 DOM，该类具有 aria-label 属性与特定日期的组合，如果有匹配项，则可以向这些匹配项添加一个类.

如果您对此有任何问题，请告诉我。但是你应该能够一步一步地遵循这个规则来实现你想要的。

有关 datepicker API 的更多选项，请查看文档here。

【讨论】：

Angular Material 团队提供了更简单的方法：material.angular.io/components/datepicker/…

【解决方案2】：

html:

<mat-calendar [minDate]="minDate" [maxDate]="maxDate" [selected]="selectedDates" (selectedChange)="selectedChange($event)" [headerComponent]="displayMonth()" [startAt]="startDate"></mat-calendar>

.ts:

    import { Component, OnInit, Input, OnChanges, ViewEncapsulation, ElementRef, Renderer2 } from '@angular/core';

constructor(
    private elRef: ElementRef,
    private renderer: Renderer2
) {}

        displayMonth() {
            let HeaderElsClass = this.elRef.nativeElement.getElementsByClassName('mat-calendar-body-cell');
            let orderDate = this.convertDate.dateFormat(this.tempOrdersDate, 'MMMM D, YYYY'); 
            // tempOrderDate is epoch array, i convert from epoch to date

            for(let index in HeaderElsClass) {
              if(typeof HeaderElsClass[index] === 'object') {
                let headerClass = HeaderElsClass[index].getAttribute('aria-label');

                orderDate.find(each => {
                  if(each === headerClass) {
                    this.renderer.addClass(HeaderElsClass[index], 'mat-calendar-body-active');
                    this.renderer.setStyle(HeaderElsClass[index], 'font-weight', '900');
                  }
                  return false;
                })
              }
            }
          }

这在我的代码中运行良好。我希望对你有用。

谢谢，阿卜杜拉

【讨论】：

【解决方案3】：

mat-datepicker 有一个 dateClass 输入，正是这样做的。向它传递一个接受Date 的函数并返回要应用的类名。

来自docs的示例：

<mat-form-field class="example-full-width">
  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker [dateClass]="dateClass" #picker></mat-datepicker>
</mat-form-field>

dateClass = (d: Date) => {
  const date = d.getDate();

  // Highlight the 1st and 20th day of each month.
  return (date === 1 || date === 20) ? 'example-custom-date-class' : undefined;
}

.example-custom-date-class {
  background: orange;
  border-radius: 100%;
}

请注意，在我的例子中，我必须将背景应用于.mat-calendar-body-cell-content，.example-custom-date-class 的直接子级，而不是像示例中那样直接应用于类。

【讨论】：