javascript - 使用 Mat datepicker 以多种颜色突出显示日期

Question

我有两组日期，需要使用 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

Answer 1

您可以在这两个地方使用 this one 函数。

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 的解决方案也是一个很棒的解决方案。