Back in the day, I used to customize a date picker (ng2-date-picker) and other CSS styles from modules that were difficult to modify:
In my *.ts file:
constructor(private elRef: ElementRef) {}
customizeButtonColor() {
var header = this.elRef.nativeElement.querySelector('.dp-nav-header');
if (header) {
header.style.color = "#c8960f";
}
var current = this.elRef.nativeElement.querySelector('.dp-current-month');
if (current) {
current.style.border = "1px solid #c8960f";
}
var selected = this.elRef.nativeElement.querySelector('.dp-selected');
if (selected) {
selected.style.background = "#c8960f";
}
}
In the template:
<dp-date-picker (click)="customizeButtonColor()" theme="dp-material" mode="month" [(ngModel)]="selectedDate" placeholder="Choose a month" [config]="datePickerConfig"></dp-date-picker>
If anyone has a cleaner solution, I would love to hear it!