使用 Mat datepicker 以多种颜色突出显示日期答案

【问题标题】：Highlighting dates in multiple color using Mat datepicker使用 Mat datepicker 以多种颜色突出显示日期
【发布时间】：2020-04-10 13:26:15
【问题描述】：

我有两组日期，需要使用 Angular 日期选择器以橙色和红色突出显示。

例如，用户输入将是这样的，

const dateInOrange = [1,5,10,20]
const dateInRed = [10,22,27]

到目前为止，我可以突出显示橙色但红色没有突出显示的日期。

请帮助下面是我的 stackblitz 链接

https://stackblitz.com/edit/angular-date-class-filter-nyxgww?file=app/datepicker-date-class-example.ts

【问题讨论】：

您只有橙色类的返回语句，检查第 68 行

标签： javascript angular typescript datepicker angular-material

【解决方案1】：

您可以在这两个地方使用这一功能。

private _setupClassFunction() {
    this.dateClass = (d: Date) => {
      let selected = false;
      var className = "";
      selected = this._redDatesArray.some(
        (item: Date) =>
          item.getFullYear() === d.getFullYear() &&
          item.getDate() === d.getDate() &&
          item.getMonth() === d.getMonth()
      );
      className = selected ? "example-custom-date--red-class " : "";

      selected = this._orangeDatesArray.some(
        (item: Date) =>
          item.getFullYear() === d.getFullYear() &&
          item.getDate() === d.getDate() &&
          item.getMonth() === d.getMonth()
      );
      className+= selected ? "example-custom-date--orange-class " : "";
      return className;
    };

Cagri 的解决方案也很棒。

【讨论】：

【解决方案2】：

https://stackblitz.com/edit/angular-date-class-filter-aactjv

你的橙子已经满了，所以总是回到那里，如果选中，我会再拿一个

private _setupClassFunction() {
  this.dateClass = (d: Date) => {
  let selected = false;      
  if (this._orangeDatesArray) {
    selected = this._orangeDatesArray.some(
      (item: Date) =>
        item.getFullYear() === d.getFullYear() &&
        item.getDate() === d.getDate() &&
        item.getMonth() === d.getMonth()
    );
    if(selected){
      return selected ? "example-custom-date--orange-class " : undefined;
    }
    else if (this._redDatesArray) {            
      selected = this._redDatesArray.some(
        (item: Date) =>
          item.getFullYear() === d.getFullYear() &&
          item.getDate() === d.getDate() &&
          item.getMonth() === d.getMonth()
      );
      return selected ? "example-custom-date--red-class " : undefined;          
    }
  }  
};

}

【讨论】：