CODEWITHSUNDEEP
javascriptangulartypescriptdatepickerangular-material
aw3123
aw3123

Reputation: 139

Highlighting dates in multiple color using Mat datepicker

I've two set of date's which needs to be highlighted in orange and red color using Angular matrial date picker.

For eg, user input will be like this, 

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

So Far, I could able to highlight the date's which are orange color but red is not getting highlighted.

Please help below is my link to stackblitz

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

Upvotes: 0

Views: 2521

Answers (2)

Borad Akash
Borad Akash

Reputation: 804

You can use the this one function at both places. 

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's solution is also a great one.

Upvotes: 1

Cagri Tacyildiz
Cagri Tacyildiz

Reputation: 17610

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

your orange is fully so always return there i took one more if as checking selected

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

}

Upvotes: 0

Related Questions