1

Currently im using ng2-date-picker node modules, also im using theme="dp-material" theme for this components. i want to override the css for that date picker components. Please help me on this. I tried the below css but no luck.

dp-date-picker {
    color: #000;
    &.dp-material{
      &.dp-day-calendar{
        color:red;
      }
    }
  }
Jeyabalan Thavamani
  • 3,057
  • 8
  • 21
  • 33

1 Answers1

0

I used to do this for override this date picker ( ng2-date-picker ) an other css from module that are hard to change :

In *.ts 

constructor(private elRef: ElementRef) {}

couleurBouton() {

  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 template :

<dp-date-picker (click)="couleurBouton()" theme="dp-material" mode="month" [(ngModel)]="selectedDate" placeholder="Date par mois" [config]="datePickerConfig"></dp-date-picker>

If someone have a solution more clean it will be a pleasure

Geoffrey
  • 21
  • 2