Подсветка дат несколькими цветами с помощью Mat datepicker - PullRequest
Новая
       14

Подсветка дат несколькими цветами с помощью Mat datepicker

0 голосов
/ 10 апреля 2020

У меня есть два набора дат, которые должны быть выделены оранжевым и красным цветом, используя 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

Ответы [ 2 ]

1 голос
/ 10 апреля 2020

Вы можете использовать эту функцию в обоих местах. 

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 также великолепно.

0 голосов
/ 10 апреля 2020

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;          
    }
  }  
};

}

...