Angular 2材料自定义日期选择器日期视图

【问题标题】：Angular2+ material customize datepicker date viewAngular 2材料自定义日期选择器日期视图
【发布时间】：2019-02-18 10:45:16
【问题描述】：

是否可以像下面这样自定义angular2+ material datepicker's 日期视图？

主要库和版本：

angular: 5.2.9
@angular/material: 5.2.4

【问题讨论】：

你玩过css吗？
@PardeepJain，我试过了，但问题是我无法将动态类添加到不同类型的日期
哦，那你可能不能

标签： angular datepicker angular-material angular5

【解决方案1】：

幸运的是，我终于弄清楚了如何解决它。

因为我使用的是 angular5，所以一种可能的解决方案是 this，请参见下面的 sn-p：

setTimeout(()=>{
      let elements = document.querySelectorAll('.tracker');
      let x =  elements[0].querySelectorAll('.mat-calendar-body-cell');
      x.forEach(y => {
        let c = new Date(y.getAttribute("aria-label"));
        if(c < this.startDate){
          const cellContent = y.querySelector('.mat-calendar-body-cell-content');
          cellContent.classList.add('custom-calendar-cell');
        }
      });
    });

对于angular6+，可以参考这个sample。

【讨论】：